6. Inline Template

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-inline-template',
  template: `<h1>{{ title }}</h1>
             <button (click)="changeTitle()">Change Title</button>`
})
export class InlineTemplateComponent {
  title = 'Hello, Angular!';
 
  changeTitle() {
    this.title = 'Title Changed!';
  }
}

Explanation:

• The @Component decorator uses the template property to define the HTML inline, instead of linking to an external .html file.
• It displays a title and a button. When the button is clicked, the changeTitle() method updates the title.