Angular js _2

 Todolist:

list: any[]=[];//array creation

  addText(item:string){

this.list.push({id:this.list.length,name:item})

    console.log(item);

    console.log(this.list);

    

  }

  removeTask(id:number){

    //console.log(id);

    this.list=this.list.

filter(item=>item.id!==id);

  }

html:

<button (click)="addText(data.value)">

Add Task</button>

    <input type="text"

 placeholder="enter data" #data>

<ul *ngFor="let item of list">

<li>{{item.name}}</li>

<button (click)="removeTask(item.id)">

Remove Task</button>

</ul>

passing data from parent to child:--

app.ts:

data=10

app.html

<app-child [item]="data"></app-child>

it can reuse

button click and change it...

string:

<app-child [item]="'data'"></app-child>

child.ts:

import {....,Input} from ...

class{

constructor(){}

Input () item=0//some default value

child.html:

{{item}}

app.ts:-

userdata=[ {name:'gaurav',class:'mca',

hobbies:['playingcricket','music','singing']}, {name:'rajesh',class:'btech',

hobbies:['playingcricket','music','singing']}, {name:'deepak',class:'mba',

hobbies:['playingcricket','music','singing']} ]

appcomponent.html

<ul *ngFor="let item2 of userdata">

    <app-childcomponent1 [item]="item2">

</app-childcomponent1>

</ul>

childcomponent1.ts:

import { Component, OnInit,Input } 

from '@angular/core';

inside the class:

 @Input() 

item:{name:string,class:string,hobbies:

  string[]}={name:'',class:'',hobbies:[]};

appcomponet1.html:

<li>{{item.name}}</li>

<li>{{item.class}}</li>

<li>{{item.hobbies}}</li>