Angular, Component Input Properties

Create new component

ng g c valid

Html

<app-validate [valid]="true" [target]="'Page A'" [authorId]="1"></app-validate>

valid.component.ts

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

@Component({
  selector: 'app-validate',
  templateUrl: './valid.component.html',
  styleUrls: ['./valid.component.css']
})
export class ValidComponent {

  @Input()
  target:String;

  @Input()
  valid:boolean;

  @Input()
  authorId:number;

  constructor() { }
}

valid.component.html

<section style="text-align: center">
  <h1>{{target}}</h1>

  <h4>Author id: {{authorId}}</h4>

  <span *ngIf="valid">Is valid</span>
  <span *ngIf="!valid">Is not valid</span>
  <br/>

  <a style="font-size: 40px;">

    <span
      class="glyphicon"
      [class.glyphicon-star]="valid"
      [class.glyphicon-star-empty]="!valid"
    ></span>

  </a>
</section>