File
Implements
Metadata
| selector |
color-from |
| templateUrl |
./color-from.component.html |
Methods
|
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
Returns: void
|
|
blueComponent
|
blueComponent: string
|
Default value: BlueComponent
|
|
|
|
greenComponent
|
greenComponent: string
|
Default value: GreenComponent
|
|
|
|
paramExist
|
paramExist: boolean
|
|
|
|
redComponent
|
redComponent: string
|
Default value: RedComponent
|
|
|
|
sidemenu
|
sidemenu: string
|
Default value: sidemenu
|
|
|
import { Component, Input, AfterViewInit } from '@angular/core';
@Component({
selector: 'color-from',
templateUrl: './color-from.component.html'
})
export class ColorFromComponent implements AfterViewInit {
// parámetro de entrada al componente
@Input() param;
paramExist: boolean;
blueComponent = 'BlueComponent';
greenComponent = 'GreenComponent';
redComponent = 'RedComponent';
sidemenu = 'sidemenu';
constructor() { }
// Hook del lifecycle de angular que detecta cuando hay cambios en el componente
ngAfterViewInit() {
this.paramExist = this.param !== '';
}
}
<!--utilización del if else de angular4-->
<aside *ngIf="paramExist; then parametroRecibido; else parametroNoRecibido"></aside>
<ng-template #parametroRecibido>
<div [ngSwitch]="param">
<p *ngSwitchCase="blueComponent" class="blue">Navigate from {{param}}
<i class="material-icons md-small blue">brightness_1</i>
</p>
<p *ngSwitchCase="redComponent" class="red">Navigate from {{param}}
<i class="material-icons md-small red">brightness_1</i>
</p>
<p *ngSwitchCase="greenComponent" class="green">Navigate from {{param}}
<i class="material-icons md-small green">brightness_1</i>
</p>
<p *ngSwitchDefault>Navigate from {{param}}
</p>
</div>
</ng-template>
<ng-template #parametroNoRecibido>
<p> No parameter </p>
</ng-template>
Legend
Html element with directive