Trying to Explain Attributes and Structural Directives to 5 years old

Published 2020-05-08

There are two different directives in Angular, Attribute Directive, and Structural Directive.

My Explanation to Developers

Attribute directive changes the look and feel or behavior of the element. For e.g, you can set the backgroundColor of an element.

Structural directive is able to change the overall DOM layout. They can control the DOM layout by adding or removing the element. For e.g, ngIf can decide whether the element is added to DOM.

My Explanation to 5 y/o

Attribute directive is like you're deciding your Barbie Doll's hair color. You can choose purple, green or black hair. But the Barbie doll must have hair.

Structural directive is like you're deciding your Barbie's doll is bald or long hair.

Is this a good analogy to explain it to 5 y/o? 🤔🤔🤔