/angular/

Angular, Component Input Properties

2017-11-12 23:09:11

Create new component

ng g c valid

Html


<app-validate [authorid]='"1"' [target]="&quot;'Page" [valid]='"true"' a'&quot;=""></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 center&quot;="" style='"text-align:'>
<h1>{{target}}</h1>
<h4>Author id: {{authorId}}</h4>
<span *ngif='"valid"'>Is valid</span>
<span *ngif='"!valid"'>Is not valid</span>
<br/>
<a 40px;&quot;="" style='"font-size:'>
<span [class.glyphicon-star-empty]='"!valid"' [class.glyphicon-star]='"valid"' class='"glyphicon"'></span>
</a>
</section>