Angular, Component Output Properties

Create new component

ng g c valid

app.component.html

  <div class="row">
    <div class="col-sm-4">
      <app-validate [target]="'Component A'" (change)="onValidStatusChange($event)"></app-validate>
    </div>
    <div class="col-sm-4">
      <app-validate [target]="'Component B'" (change)="onValidStatusChange($event)"></app-validate>
    </div>
    <div class="col-sm-4">
      <app-validate [target]="'Component C'" (change)="onValidStatusChange($event)"></app-validate>
    </div>
  </div>

  <div class="well" *ngIf="event">Event from: {{event | json}}</div>

app.component.ts

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

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

  onValidStatusChange(event:any) {
    this.event = event;
  }
}

valid.component.ts

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

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

  @Input()
  target: String;

  valid: boolean = false;

  @Output()
  change = new EventEmitter();

  constructor() {
  }

  toggleValid() {
    this.valid = !this.valid;
    this.change.emit({
      target: this.target,
      valid: this.valid,
    });
  }
}

valid.component.html

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

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

  <a style="font-size: 40px;" (click)="toggleValid()">

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

  </a>
</section>