/angular/

Angular, Component Output Properties

2017-11-12 23:39:11

Create new component

ng g c valid

app.component.html



<div class='"row"'>
<div class='"col-sm-4"'>
<app-validate (change)='"onValidStatusChange($event)"' [target]="&quot;'Component" a'&quot;=""></app-validate>
</div>
<div class='"col-sm-4"'>
<app-validate (change)='"onValidStatusChange($event)"' [target]="&quot;'Component" b'&quot;=""></app-validate>
</div>
<div class='"col-sm-4"'>
<app-validate (change)='"onValidStatusChange($event)"' [target]="&quot;'Component" c'&quot;=""></app-validate>
</div>
</div>

<div *ngif='"event"' class='"well"'>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 center&quot;="" style='"text-align:'>
<h1>{{target}}</h1>
<span *ngif='"valid"'>Is valid</span>
<span *ngif='"!valid"'>Is not valid</span>
<br/>
<a (click)='"toggleValid()"' 40px;&quot;="" style='"font-size:'>
<span [class.glyphicon-star-empty]='"!valid"' [class.glyphicon-star]='"valid"' class='"glyphicon"'></span>
</a>
</section>