Interpolation
app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'schoolApp';
}

registration.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

Looping through Model Object set in component and Printing in HTML Page
Student.ts

export class Student {
   public isPresent:boolean=true;

   constructor(public studentId:number,
               public studentName:string,
               public studentAge:number,
               public studentGender:boolean){}
               

    getAttendance():string{
       if(this.isPresent==true)
        return "P";
       else 
        return "A";
    }           
}

registration.component.ts

import { Component, OnInit } from '@angular/core';
import {Student} from '../model/student';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  public arrStudent:Array<Student>;
  constructor() { }

  ngOnInit() {
     this.arrStudent = [new Student(101, 'Mugil', 31, true),
                        new Student(102, 'Manasa', 26, false),
                        new Student(103, 'Kavitha', 27, false),
                        new Student(104, 'Renu', 28, true),
                        new Student(105, 'Joseph', 23, true)];
  }

  getGender(Student):string
  {
    if(Student.studentGender==true)
     return "M";
     else
     return "F";
  }
}

registration.component.html

<style>
 .even
    {
        background-color: rgb(235, 235, 235);
    }

    .odd
    {
        background-color : #ffffff;
    }
</style>
<table cellpadding="5">
    <thead>
  <tr>
    <th>Sno</th>
    <th>Student ID</th>
    <th>Name</th>
    <th>Age</th>
    <th>Gender</th>
    <th>Attendance</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let objStudent of arrStudent; index as i;even as isEven;odd as isOdd" [class]="isEven?'even':'odd'">
     <td>{{i+1}}</td>
     <td>{{objStudent.studentId}}</td>
     <td>{{objStudent.studentName}}</td>
     <td>{{objStudent.studentAge}}</td>
     <td>{{ getGender(objStudent) }}</td>
     <td [class]="objStudent.isPresent?'present':'absent'">{{objStudent.getAttendance()}}</td> 
  </tr>
</tbody>
</table>