angular style

style binding

showme:boolean:true

this.showme=!this.showme 

NgStyle:--

ngStyle directive to set style properties to dom element

we can pass dynamic value via variable

ex:--

<div [ngStyle]="background-color:value'>example</div>

ex:---

tsfile:

  colorval='red';

htmlfile

<span [ngStyle]="{'color':colorval}">

    hi

</span>

we can pass more then one value..

<span [ngStyle]="{'color':colorval,'background-color':color1}">

    hi

</span>

ngClass:---

set a class name for the element

we can pass dynamic values via variables

1.ng class with string,array,object

2.ng class with component based method

example:--

<div [ngClass]="'one'">using string</div>

<div [ngClass]="{'one':true,'two:false}">with multiple class</div>

static

html file:--

<!-- ngclass -->

<span [ngClass]="'one'">

good morning

</span>

css file:--

.one{

    color:red;

}

dynamic

<span [ngClass]="classname">

good morning

</span>

ts file

classname='one';

css file

.one{

    color:red;

    background-color: aqua;

}

morethenoneclass:--

<span [ngClass]="[classname,classname1]">

good morning

</span>

ts:

 classname='one';

  classname1='two';

css:

.one{

    /* color:red; */

    background-color: aqua;

}

.two{

    color:blue;

}

with expression:--

<span [ngClass]="{'one':true,'two':false}">

good morning

</span>

with only css file

Data binding:---

bind the data from view[template] to controller and vice versa

interpolation:--ts...html[component to template]

or in button click you are sending data...to ts

one way data binding:

component to view

interpolation

property binding

style binding

attribute binding

two way data binding

data flow view to component and vice versa

update and display same time

form:--

<input type=text [(ngModel)]="name">

{{name}}