Angular 2 (Angular 4) – Structural Directives

This video was meant to be about dynamic forms, however I changed it last minute as I thought that learning the built in Structural Directives first would be important before I start build a dynamic form.

There are 3 built in Structural Directives in Angular 2.

– *ngIf
– *ngFor
– ngSwitch

Along with the explanation of what these 3 can do for your HTML template files, I explain what the asterisks means for ngIf and ngFor and how behind the scenes the Angular 2 framework is using a template element tag to render the content inside of it.

We show that components inside of any of the directives specified above get destroyed an re-initialised, every time it is toggle to be hidden. This is something a lot of developers make mistakes on. I show you how you can hide components without destroying it by using simple attribute binding.

There is no github repo for this video. It’s pretty simple so just follow along.

You can follow me on twitter at: https://twitter.com/dduckmanton82
You can also follow my business account at: https://twitter.com/LyradDigital
You can also follow my business account on Facebook at: https://www.facebook.com/lyraddigital

I publish an article every now and then on LinkedIn as well. So connect with me on LinkedIn at: https://au.linkedin.com/in/daryl-duckmanton-4478a14a

Watch all my other videos in this series:-

Part 1 – Introduction and the CLI: https://www.youtube.com/watch?v=QzXdiH3wJp0
Part 2 – Angular Module Basics: https://www.youtube.com/watch?v=GeomqoUUCho
Part 3 – Multiple Angular Modules: https://www.youtube.com/watch?v=33ADKstmXqQ
Part 4 – Shared Angular Modules: https://www.youtube.com/watch?v=QExtdZKqw1E
Part 5 – Eagerly and Lazily Loading Modules: https://www.youtube.com/watch?v=0YC4qmnkMbU
Part 6 – Basic App Component and Presentation: https://www.youtube.com/watch?v=np7rZUob-CY
Part 7 – App Component bindings: https://www.youtube.com/watch?v=RmC8B_GaONM
Part 8 – Attribute binding and the main navigation: https://www.youtube.com/watch?v=OxjR7lFP430
Part 9 – Basic Form and Dual Binding: https://www.youtube.com/watch?v=23HsTwj7oAw
Part 10 – Registration Form Part 1: https://www.youtube.com/watch?v=ysEYpkQ-wbU
Part 11 – Registration Form Part 2: https://www.youtube.com/watch?v=xUaz3GULoIQ
Part 12 – Registration Form Part 3: https://www.youtube.com/watch?v=8iPb-4dNpWo
Part 13 – Registration Form Part 4: https://www.youtube.com/watch?v=8GhobtQCRvo
Part 14- Registration Form Part 5: https://www.youtube.com/watch?v=q7mkQmqL0JM
Part 16 – Dynamic Forms: https://www.youtube.com/watch?v=nxa78ZxeNdI
Part 17 – Lifecycle Hooks Part 1: https://www.youtube.com/watch?v=WjGekL_4JMg
Part 18 – Lifecycle Hooks Part 2: https://www.youtube.com/watch?v=efEcMvkA8yw

source