Error- Error occurs in the template of component AppComponent.

Question

Hi

  I amggeting above error. Below is the code

import { Component, ElementRef, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})

export class AppComponent {
  @ViewChild('myModal') model : ElementRef | undefined;
  studentObj: Student = new Student();

  
openModal(){
    const modal = document.getElementById("myModal")
    if (modal != null) {
      modal.style.display = 'block';
    }
  }

closeModal(){
  if (this.model != null) {
    this.model.nativeElement.style.display = 'none';
  }
}

saveStudent(){
  debugger;
  const isLocalPresent = localStorage.getItem("angular17Crud");
 if(isLocalPresent != null)
  {
    const oldArray = JSON.parse(isLocalPresent);
    oldArray.push(this.studentObj);
    localStorage.setItem('angular17Crud',JSON.stringify(oldArray));}
  else {
    const newArr = [];
    newArr.push(this.studentObj);
    localStorage.setItem('angular17Crud',JSON.stringify(newArr));
  }
}
}

export class Student {
  name:string;
  mobileno:string;
  email:string;
  city:string;
  state:string;
  pincode:string;
  address:string;
  constructor(){
    this.address ='';
    this.name='';
    this.mobileno='';
    this.email='';
    this.city='';
    this.state='';
    this.pincode='';
  }
}

<div class="container">
<div class="row pt-3">
  <div class="col-6">
    <h4>Student Portal</h4>
  </div>
  <div class="col-6 text-end">
    <button class="btn btn-outline-success" (click)="openModal()">Add New</button>
  </div>
</div>
</div>

<div class="row">
  <div class="col-3">
    <div class="card">
      <div class="card-header">
        <div class="row">
          <div class="col-6">
            Student Name
          </div>
          <div  class="col-6 text-end">
            Mobile No
          </div>
        </div>
      </div>
      <div class="card-body">
        <p>Email</p>
        <p>City , State , PinCode</p>
        <p>Address</p>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Create New Student</h1>
        <button type="button" class="btn-close" (click)="closeModal()" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-6">
            <label for="">Name</label>
            <input type="text" [(ngModel)]="studentObj.name" class="form-control-sm" placeholder="Name">
          </div>
        </div>
        <div class="row">
          <div class="col-6">
            <label for="">Mobile No</label>
            <input type="text" [(ngModel)]="studentObj.mobileno" class="form-control-sm" placeholder="Mobile No">
          </div>
        </div>
        <div class="row">
          <div class="col-6">
            <label for="">Email</label>
            <input type="text" [(ngModel)]="studentObj.email" class="form-control-sm" placeholder="Email">
          </div>
        </div>
        <div class="row">
          <div class="col-6">
            <label for="">City</label>
            <input type="text" [(ngModel)]="studentObj.city" class="form-control-sm" placeholder="City">
          </div>
        </div>
        <div class="row">
          <div class="col-6">
            <label for="">State</label>
            <input type="text" [(ngModel)]="studentObj.state" class="form-control-sm" placeholder="State">
          </div>
        </div>
        <div class="row">
          <div class="col-6">
            <label for="">PinCode</label>
            <input type="text" [(ngModel)]="studentObj.pincode" class="form-control-sm" placeholder="PinCode">
          </div>
        </div>
        <div class="row">
          <div class="col-6">
            <label for="">Address</label>
            <input type="text" [(ngModel)]="studentObj.address" class="form-control-sm" placeholder="Address">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" (click)="saveModal()" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Thanks