src/app/red/red.component.ts
selector | color-red |
templateUrl | ../shared/templates/color.component.html |
constructor(activatedRoute: ActivatedRoute)
|
Defined in src/app/red/red.component.ts:19
|
ngOnInit |
ngOnInit()
|
Defined in src/app/red/red.component.ts:24
|
Returns:
void
|
Public store |
store: |
Defined in src/app/red/red.component.ts:12
|
import { IColor } from './../model/IColor';
import { ActivatedRoute} from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'color-red',
templateUrl: '../shared/templates/color.component.html'
})
export class RedComponent implements OnInit {
public store: IColor = {
paramFrom: '',
paramExist: false,
colorLight: 'red-light',
colorMedium: 'red',
colorDark: 'red-dark',
component: 'RedComponent'
};
constructor(private activatedRoute: ActivatedRoute ) { }
ngOnInit() {
const parametros$: Observable<any> = this.activatedRoute.params;
parametros$.subscribe(parametros => {
this.store.paramFrom = parametros['from'] || '';
this.store.paramExist = this.store.paramFrom !== '';
});
}
}
<section class="component md-border">
<div class="nav-component">
<a [routerLink]="['light']"> <i class="material-icons md-small md-border md-round {{store.colorLight}}">colorize</i> </a>
<a [routerLink]="['medium']"> <i class="material-icons md-small md-border md-round {{store.colorMedium}}">colorize</i> </a>
<a [routerLink]="['dark']"> <i class="material-icons md-small md-border md-round {{store.colorDark}}">colorize</i> </a>
</div>
<div class="principal-component">
<router-outlet></router-outlet>
</div>
<p class="{{store.colorMedium}}">{{store.component}} <span class='orange'>router-outlet</span> </p>
<color-from [param]="store.paramFrom"></color-from>
<color-submenu [component]="store.component"></color-submenu>
</section>