angular @Input code example

Example 1: how to make input in angular optional

export class ChildComponent {

    @Input() showName?: boolean;

    constructor() { }

}

Example 2: output event angular

@Component({...})
export class CounterComponent {

  @Input()
  count: number = 0;

  @Output()
  change: EventEmitter<number> = new EventEmitter<number>();

  increment() {
    this.count++;
    this.change.emit(this.count);
  }

  decrement() {
    this.count--;
    this.change.emit(this.count);
  }

  	// in parent component
	//(change)="countChange($event)"> 

}

Example 3: input set variable angular

@Component({
    selector: 'my-component',
    template: '<h3> My component </h3>'
})

export class MyComponent {
    @Input()
    set name(str: string) {
        this.service.setName(str);
        console.log(str);
    }
}

Example 4: input property angular

//passing properties to child elements
<app-slider [title]="'This is a title'"> </app-slider>

//inside the component slider i add just before the constructor :
.
.
@input() title: string;
constructor(){
}


//after this we can use these new property inside the .html file of the component
<div id='slider' class='slider-big'>
  <h1> {{title}}</h1>

</div>