{"id":59811,"date":"2018-05-03T11:21:59","date_gmt":"2018-05-03T05:51:59","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59811"},"modified":"2024-04-12T14:20:47","modified_gmt":"2024-04-12T08:50:47","slug":"angular-built-in-attribute-directives","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-built-in-attribute-directives\/","title":{"rendered":"Angular Built-in Attribute Directives"},"content":{"rendered":"

Angular Built-in Attribute Directives<\/h1>\n

There are three kinds of directives in Angular:<\/p>\n

Components\u2014directives with a template.
\nStructural directives\u2014change the DOM layout by adding and removing DOM elements.
\nAttribute directives\u2014change the appearance or behavior of an element, component, or another directive.<\/p>\n

Components are the most common of the three directives. You saw a component for the first time in the QuickStart guide.<\/p>\n

Structural Directives change the structure of the view. Two examples are NgFor and NgIf. Learn about them in the Structural Directives guide.<\/p>\n

Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax guide, for example, can change several element styles at the same time.<\/p>\n

<\/h2>\n

NgClass<\/strong><\/p>\n

Overview
\n@Directive({ selector: ‘[ngClass]’ })
\nclass NgClass implements DoCheck {
\nset klass: string
\nset ngClass: string | string[] | Set<string> | {…}
\nngDoCheck(): void
\n}<\/p>\n

How To Use
\n<some-element [ngClass]=”‘first second'”>…<\/some-element><\/p>\n

<some-element [ngClass]=”[‘first’, ‘second’]”>…<\/some-element><\/p>\n

<some-element [ngClass]=”{‘first’: true, ‘second’: true, ‘third’: false}”>…<\/some-element><\/p>\n

<some-element [ngClass]=”stringExp|arrayExp|objExp”>…<\/some-element><\/p>\n

<some-element [ngClass]=”{‘class1 class2 class3’ : true}”>…<\/some-element><\/p>\n

Inputs
\nclass bound to NgClass.klass
\nngClass bound to NgClass.ngClass<\/p>\n

Description
\nThe CSS classes are updated as follows, depending on the type of the expression evaluation:<\/p>\n

string – the CSS classes listed in the string (space delimited) are added,
\nArray – the CSS classes declared as Array elements are added,
\nObject – keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.<\/p>\n

Constructor
\nconstructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer2)<\/p>\n

Members
\nset klass: string<\/p>\n

set ngClass: string | string[] | Set<string> | {
\n[klass: string]: any;
\n}<\/p>\n

ngDoCheck(): void<\/p>\n

 <\/p>\n

NgStyle<\/strong><\/p>\n

@Directive({ selector: ‘[ngStyle]’ })
\nclass NgStyle implements DoCheck {
\nset ngStyle: {…}
\nngDoCheck()
\n}<\/p>\n

How To Use
\n<some-element [ngStyle]=”{‘font-style’: styleExp}”>…<\/some-element><\/p>\n

<some-element [ngStyle]=”{‘max-width.px’: widthExp}”>…<\/some-element><\/p>\n

<some-element [ngStyle]=”objExp”>…<\/some-element><\/p>\n

Selectors
\n[ngStyle]\n

Inputs
\nngStyle bound to NgStyle.ngStyle<\/p>\n

Description
\nThe styles are updated according to the value of the expression evaluation:<\/p>\n

keys are style names with an optional .<unit> suffix (ie ‘top.px’, ‘font-style.em’),
\nvalues are the values assigned to those properties (expressed in the given unit).<\/p>\n

Constructor
\nconstructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer2)<\/p>\n

Members
\nset ngStyle: {
\n[key: string]: string;
\n}<\/p>\n

ngDoCheck()<\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course.<\/strong><\/p>\n

\"\"<\/a><\/p>\n