Angular Built-in Attribute Directives

There are three kinds of directives in Angular:

Components—directives with a template.
Structural directives—change the DOM layout by adding and removing DOM elements.
Attribute directives—change the appearance or behavior of an element, component, or another directive.

Components are the most common of the three directives. You saw a component for the first time in the QuickStart guide.

Structural Directives change the structure of the view. Two examples are NgFor and NgIf. Learn about them in the Structural Directives guide.

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.

NgClass

Overview
@Directive({ selector: ‘[ngClass]’ })
class NgClass implements DoCheck {
set klass: string
set ngClass: string | string[] | Set<string> | {…}
ngDoCheck(): void
}

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

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

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

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

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

Inputs
class bound to NgClass.klass
ngClass bound to NgClass.ngClass

Description
The CSS classes are updated as follows, depending on the type of the expression evaluation:

string – the CSS classes listed in the string (space delimited) are added,
Array – the CSS classes declared as Array elements are added,
Object – keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

Constructor
constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer2)

Members
set klass: string

set ngClass: string | string[] | Set<string> | {
[klass: string]: any;
}

ngDoCheck(): void

 

NgStyle

@Directive({ selector: ‘[ngStyle]’ })
class NgStyle implements DoCheck {
set ngStyle: {…}
ngDoCheck()
}

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

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

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

Selectors
[ngStyle]

Inputs
ngStyle bound to NgStyle.ngStyle

Description
The styles are updated according to the value of the expression evaluation:

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

Constructor
constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer2)

Members
set ngStyle: {
[key: string]: string;
}

ngDoCheck()

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course.

• Practice Test for Angular4
• Govt Certification in Angular 4
• Blog posts on Angular 4 and Web Development

Back to Angular 4 Tutorial Main Page