What is difference between Structural and Attribute directives?


Posted On: Feb 22, 2018


    1 Answer Written

  •  devquora
    Answered by Satyam

    Structural And Attribute Directives Differences

    The attribute directives only modify DOM and the naming convention of this is as name: directive.ts. The same naming convention is for the structural directive which actively follows custom variation.  The major difference between both of them are mentioned below:

    Structural directiveAttribute directive
    The structure of visual perception can be changed with structural directives.Attribute directives are coded by using them as attributes for the respective elements.
    They are responsible for the HTML layout, performing the modification and shape of DOM structure with the help of functions like addition, removal or further manipulation.It is used as an element attribute that is capable to change its appearance or behavior of the element or directive.
    to a host element, only one structural directive can be applied. After this, the directive does the work on its own with the host element along with its descendants, whatever the work might be.Plenty of attribute directives can be applied to one host element such as with the Ngstyle directive.
    NgIf, ngFor, and Ngswitch are the three built-ins available in structural directives.NgStyle and NgClass are the built-ins available in attributes directives.
    Structural directives are the directives that are easily recognizable.In comparison to structural directives, attributes directives are not easy to recognize.
    An asterisk “*” is used as a prefix in structural directives. One can also use the template tag directly.An asterisk “*” is not used as a prefix in attributes directive.
    Structural directives are used to add or remove content or the overall structure of the template as they are applied to <template> elements.Attributes directives come with their own style and HTML and thus one host element can tackle only one component.
    No brackets or parentheses are used in the syntax of structural directives.Brackets are used in the syntax of attributes directives.

Related Questions

Please Login or Register to leave a response.

Related Questions

Angular 4 Interview Questions

Explain component decorators in Angular4.

A decorator is the core concept when developing an angular framework with version 2 and above. It may become a core lang..

Angular 4 Interview Questions

Write the CLI command to generate a component in Angular4.

Components are just simple classes which are declared as components with the help of component decorators. It becomes e..

Angular 4 Interview Questions

Explain the component directory structure of angular4.

Here are the elements which are present in the component directory structure anf modules:-module.ts- in this, the angu..