wKoza

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

@Injectable()
export class LoggerService {

  logs: Array<string> = [];

  level: number= 2;  //debug:2, info:1, error:0

wKoza

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { LoggerService } from "./logger.service";

@NgModule({
  declarations: [

wKoza

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

@Injectable()
export class Logger {

  logs: string[] = []; 

  log(message: string) {
    this.logs.push(message);
    console.log(message);

wKoza

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


@Component({
  selector: 'app-root',
  template: `
    <tabs>
      <tab [tabTitle]="'Tab 1'">Contenu du Tab 1 </tab>
      <tab [tabTitle]="'Tab 2'">Contenu du Tab 2</tab>
    </tabs>

wKoza

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

@Component({
  selector: 'tab',
  styles: [`
    .pane{
      padding: 1em;
    }
  `],
  template: `

wKoza

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import {TabComponent} from "../tab/tab.component";


@Component({
  selector: 'tabs',
  template:`
    <ul class="nav nav-tabs">
      <li *ngFor="let tab of tabs" (click)="selectTab(tab)" [class.active]="tab.active">
        <a href="#">{{tab.title}}</a>

wKoza

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

@Component({
  selector: 'app-root',
  template: `
 <child>
    <header>Mon Header injecté</header>
    Mon contenu principal injecté
    <footer>Mon Foooter injecté</footer>
 </child>

wKoza

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

@Component({
  selector: 'child',
  template: `
    <h1>Child Component :</h1>
    <section><ng-content select="header"></ng-content></section>
    <section><h1><ng-content></ng-content></h1></section>
    <section><ng-content select="footer"> </ng-content></section>
  `

wKoza

import {Component, ViewChild, QueryList, ViewChildren} from '@angular/core';
import {PersonComponent} from "./person/person.component";
import {CarComponent} from "./car/car.component";

@Component({
  selector: 'app-root',
  template: `
  <h1 *ngIf="disable">Votre personnage préféré est : {{theBest.name + ' ' +theBest.lastname}}</h1>
  <div>
    <person [person]="character" [disable]="disable"  *ngFor="let character of characters; let i = index" 

wKoza

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

@Component({
  selector: 'person',
  template: `
  <div *ngIf="!disable" [ngClass]="{'color': color}">
  <h1>{{person.name}} {{person.lastname}}</h1>
  <button (click)="choose()">Choisir</button>
  <hr>
  </div>