app.component.ts

@Component({
  selector: 'my-app',
  template: `
    <div [ngClass]="theme">
      <h2>{{name}}</h2>
      <div>Themes implemented</div> <br/><br/>
      Select Theme : <a href="#" (click)="setTheme('light')">Light </a>  | 
      <a href="#" (click)="setTheme('dark')">Dark</a> |
      <a href="#" (click)="setTheme('')">No theme</a><br/><br/>
      <p> <b>Current Theme : </b> {{ theme || 'none' }}   </p>
    
      <custom-input [placeholder]="'Your name ...'"  ></custom-input> <br/>
      <custom-button [text]="'Sign In'" [state]="'primary'"  ></custom-button>
    </div>
  `,
})
export class App {
  name:string;
  theme = ''; // No initial theme set
  constructor() {
    this.name = `Themeable Components - Part 2 - Angular! v${VERSION.full}`
  }
  
  setTheme(theme){
    this.theme = theme;
  }
}