Directives - Angular 5 (Tutorial #7)
Directives are one of the important and cool feature of Angular application and its play a important role in angular projects.
The first queestion that will come to our mind is that what exactly a directive is ? and what it can do for us in angular. So Directives are extra markup on your DOM . So if you find some same logic need to be use across the components so you have 2 approach for the same.
1) You can write that logic individually in each component but it is not feasible everywhere and it increase your line of code and make your project more complex so we will go with second approach and that is directive
2) we will write that behavior inside our directive and wherever we need it we will just import that directive
In Angular there are 3 types of directives and those are
1) Component
2)Attribute
3)Structurual
Component: In our previous lessons we have already discussed about Component. If TS class has a decorator with the name @Component it means we area creating our component decorator and then we can use this component in html template by specify by its selector name.
Attribute Directive : It is mainly used to change/modify the behavior of the html element.
As the name tells, it is used to change the attributes of the existing html element. In Angular there are many built in attribute directives. Some of the useful ones are NgClass, NgStyle
Structural Directive:
Structural directives are responsible for HTML layout. They shape or reshape the DOM's structure, typically by adding, removing, or manipulating elements.
To say in simple words, unlike Attribute Directive which we see above, Structural directive is used to add or remove the Dom Element itself in the Dom Layout, whereas attribute directives are used to just change the attribute or appearance of the Dom element.
Structural directives are easy to recognize by using an asterisk (*)
Built-in structural directive - NgIf, NgFor, and NgSwitch
If you liked this video don't forget to subscribe my channel
Click subscribe for more updates:
• Introduction- Angular (Tutorial #1)
Connect with me:
Facebook: / angularjs4beginners
LinkedIn: / nisha-singla-82407aa0
Website : http://nishasingla.com/
Смотрите видео Directives - Angular 5 (Tutorial #7) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Nisha Singla 14 Май 2018, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 23,162 раз и оно понравилось 269 людям.