title
Directives in Angular Applications

description
🔥Get the COMPLETE COURSE (60% OFF - LIMITED TIME): https://programmingwithmosh.com/courses/angular Learn how to use directives to manipulate the DOM in your Angular apps. TABLE OF CONTENT 00:00 Introduction 00:31 ngIf 06:43 Hidden Property 10:08 ngSwitchCase 16:45 ngFor 21:04 ngFor and Change Detection RELATED VIDEOS Angular 4 Tutorial for Beginners https://youtu.be/k5E2AVpwsko Angular Version History https://youtu.be/9AaRJ8COXdM Angular Material https://youtu.be/wPT3K3w6JtU Angular Animations https://youtu.be/ra5qNKNc95U MY OTHER COURSES I have several other courses on web and mobile application development. You can find them all here: http://programmingwithmosh.com/courses STAY IN TOUCH https://www.facebook.com/programmingwithmosh/ https://twitter.com/moshhamedani

detail
{'title': 'Directives in Angular Applications', 'heatmap': [{'end': 138.823, 'start': 116.613, 'weight': 0.714}, {'end': 472.597, 'start': 452.517, 'weight': 0.719}, {'end': 711.356, 'start': 663.452, 'weight': 0.796}, {'end': 1003.457, 'start': 950.125, 'weight': 0.801}, {'end': 1272.179, 'start': 1254.239, 'weight': 0.844}, {'end': 1333.857, 'start': 1281.084, 'weight': 0.754}], 'summary': "Tutorial on 'directives in angular applications' provides a comprehensive overview of built-in directives in angular 4, including ngif, ngswitchcase, ngclass, and ngstyle, emphasizing cleaner and consistent syntax for rendering and removal of elements based on conditions. it also covers optimizing dom manipulation, implementing tab navigation, dynamic rendering, and change detection in angular, with practical demonstrations and examples.", 'chapters': [{'end': 394.851, 'segs': [{'end': 27.501, 'src': 'embed', 'start': 2.096, 'weight': 0, 'content': [{'end': 9.317, 'text': 'Earlier in the course, you learned about ng4, which is one of the built-in directives in Angular that we use for rendering lists.', 'start': 2.096, 'duration': 7.221}, {'end': 13.818, 'text': "In this section, we're going to look at ng4 in more detail.", 'start': 10.097, 'duration': 3.721}, {'end': 21.96, 'text': "We're also going to look at the other built-in directives, including ngIf, ngSwitchCase, ngClass, and ngStyle.", 'start': 14.458, 'duration': 7.502}, {'end': 27.501, 'text': "And finally, we'll wrap up this section by looking at building custom directives in Angular.", 'start': 22.52, 'duration': 4.981}], 'summary': 'Learn about ng4, ngif, ngswitchcase, ngclass, ngstyle, and custom directives in angular.', 'duration': 25.405, 'max_score': 2.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk2096.jpg'}, {'end': 81.435, 'src': 'embed', 'start': 53.037, 'weight': 5, 'content': [{'end': 56.92, 'text': "But let's not worry about that and just focus on showing or hiding part of a page.", 'start': 53.037, 'duration': 3.883}, {'end': 65.543, 'text': 'Now, in our app.component.html file, If you have any courses in this array, we want to render them in a list.', 'start': 57.76, 'duration': 7.783}, {'end': 68.649, 'text': 'Otherwise we want to display a message to the user.', 'start': 66.345, 'duration': 2.304}, {'end': 70.393, 'text': 'Like there are no courses yet.', 'start': 68.93, 'duration': 1.463}, {'end': 73.279, 'text': "So first I'm going to create a div.", 'start': 71.395, 'duration': 1.884}, {'end': 78.193, 'text': "This is where we're going to display the list of courses.", 'start': 75.151, 'duration': 3.042}, {'end': 81.435, 'text': "Now here, again, I'm simplifying this example.", 'start': 79.173, 'duration': 2.262}], 'summary': 'Rendering courses in a list if they exist, otherwise displaying a message about no courses.', 'duration': 28.398, 'max_score': 53.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk53037.jpg'}, {'end': 141.744, 'src': 'heatmap', 'start': 109.27, 'weight': 4, 'content': [{'end': 114.032, 'text': 'so, to refresh your memory, we use directives to modify the dom.', 'start': 109.27, 'duration': 4.762}, {'end': 116.613, 'text': 'now there are two types of directives.', 'start': 114.032, 'duration': 2.581}, {'end': 121.516, 'text': 'structural directives modify the structure of the dom by adding or removing dom elements.', 'start': 116.613, 'duration': 4.903}, {'end': 126.097, 'text': 'attribute directives modify the attributes of DOM elements.', 'start': 122.535, 'duration': 3.562}, {'end': 130.038, 'text': 'So here we want to change or modify the structure of our DOM.', 'start': 126.957, 'duration': 3.081}, {'end': 132.5, 'text': 'We want to add or remove one DOM element.', 'start': 130.519, 'duration': 1.981}, {'end': 138.823, 'text': "So whenever you're using structural directives, you need to prefix them with an asterisk.", 'start': 133.34, 'duration': 5.483}, {'end': 141.744, 'text': "And I'm going to explain the reason later in this section.", 'start': 139.423, 'duration': 2.321}], 'summary': 'Directives modify the structure or attributes of the dom; structural directives add or remove dom elements.', 'duration': 32.474, 'max_score': 109.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk109270.jpg'}, {'end': 264.117, 'src': 'embed', 'start': 215.103, 'weight': 1, 'content': [{'end': 221.546, 'text': 'So here under app root, look, we have only one div, which is the div with the message no courses yet.', 'start': 215.103, 'duration': 6.443}, {'end': 224.468, 'text': 'So the other div is not in the DOM.', 'start': 222.147, 'duration': 2.321}, {'end': 226.569, 'text': "And that's what I want you to pay attention to.", 'start': 224.888, 'duration': 1.681}, {'end': 236.534, 'text': 'So when you use ng if, if this condition evaluates to truthy, this element will be added to the DOM, otherwise it will be removed from the DOM.', 'start': 227.249, 'duration': 9.285}, {'end': 242.667, 'text': 'Now in Angular 4, now we have a slightly different syntax to implement the exact same feature.', 'start': 237.523, 'duration': 5.144}, {'end': 251.194, 'text': 'So, instead of repeating ng if twice, with this condition reversed, we can implement it using an if and else kind of approach,', 'start': 243.488, 'duration': 7.706}, {'end': 254.297, 'text': 'just like how we have if and else in a lot of programming languages.', 'start': 251.194, 'duration': 3.103}, {'end': 261.334, 'text': 'So, first we need to change the type of this second element from div to ngTemplate.', 'start': 255.091, 'duration': 6.243}, {'end': 264.117, 'text': 'So ng-template.', 'start': 261.896, 'duration': 2.221}], 'summary': 'In angular 4, ng if can be implemented using an if and else approach with ngtemplate.', 'duration': 49.014, 'max_score': 215.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk215103.jpg'}], 'start': 2.096, 'title': 'Angular directives and ng if in angular 4', 'summary': 'Provides a detailed overview of built-in directives in angular, such as ng4, ngif, ngswitchcase, ngclass, and ngstyle, and demonstrates the usage of ng if and else in angular 4 for rendering and removal of elements based on conditions, emphasizing cleaner and consistent syntax.', 'chapters': [{'end': 132.5, 'start': 2.096, 'title': 'Angular directives overview', 'summary': 'Covers the detailed explanation of built-in directives in angular including ng4, ngif, ngswitchcase, ngclass, and ngstyle, along with building custom directives, emphasizing the purpose and usage of each directive in modifying the dom.', 'duration': 130.404, 'highlights': ['The chapter covers the detailed explanation of built-in directives in Angular including ng4, ngIf, ngSwitchCase, ngClass, and ngStyle. It provides an overview of the built-in directives in Angular, highlighting their significance in manipulating the DOM.', 'The chapter explains the usage of ng4 for rendering lists and the importance of modifying the structure of the DOM. It emphasizes the usage of ng4 for rendering lists and modifying the structure of the DOM.', 'The chapter introduces the concept of structural and attribute directives, emphasizing the role of structural directives in modifying the structure of the DOM. It introduces the concept of structural and attribute directives, highlighting the significance of structural directives in modifying the DOM structure.', 'The chapter emphasizes the purpose of ngIf in showing or hiding parts of a page based on a condition. It emphasizes the purpose of ngIf in displaying or hiding parts of a page based on conditions.', 'The chapter highlights the significance of building custom directives in Angular. It emphasizes the significance of building custom directives in Angular.']}, {'end': 394.851, 'start': 133.34, 'title': 'Angular 4: ng if and else', 'summary': 'Explains the usage of ng if and else structural directives in angular 4, demonstrating the rendering and removal of elements based on conditions, with a cleaner and more consistent syntax.', 'duration': 261.511, 'highlights': ['The chapter explains the usage of ng if and else structural directives in Angular 4. This provides an overview of the main topic of the chapter.', 'Demonstrates the rendering and removal of elements based on conditions using ng if. It explains how elements are added to or removed from the DOM based on the truthiness of the condition, providing a practical demonstration.', 'Introduces a cleaner and more consistent syntax for implementing ng if and else. It presents a cleaner and more consistent syntax for implementing the ng if and else structural directives, promoting clarity and consistency in code.']}], 'duration': 392.755, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk2096.jpg', 'highlights': ['The chapter covers the detailed explanation of built-in directives in Angular including ng4, ngIf, ngSwitchCase, ngClass, and ngStyle.', 'Demonstrates the rendering and removal of elements based on conditions using ng if.', 'Introduces a cleaner and more consistent syntax for implementing ng if and else.', 'The chapter explains the usage of ng4 for rendering lists and the importance of modifying the structure of the DOM.', 'The chapter introduces the concept of structural and attribute directives, emphasizing the role of structural directives in modifying the structure of the DOM.', 'The chapter emphasizes the purpose of ngIf in showing or hiding parts of a page based on a condition.', 'The chapter highlights the significance of building custom directives in Angular.', 'Provides an overview of the built-in directives in Angular, highlighting their significance in manipulating the DOM.']}, {'end': 615.355, 'segs': [{'end': 452.517, 'src': 'embed', 'start': 395.591, 'weight': 0, 'content': [{'end': 400.815, 'text': "Now there is another approach to show or hide part of a page, and that's what I'm going to show you in the next lecture.", 'start': 395.591, 'duration': 5.224}, {'end': 410.419, 'text': 'Now back in the same example, let me show you another way to show or hide part of a page.', 'start': 405.796, 'duration': 4.623}, {'end': 414.881, 'text': 'Instead of using the ng if directive, we can use the hidden attribute.', 'start': 411.319, 'duration': 3.562}, {'end': 420.765, 'text': 'So in HTML, you know, we can apply this hidden attribute to our divs to hide them.', 'start': 415.662, 'duration': 5.103}, {'end': 425.678, 'text': 'Now if you go back in the browser, we should see no courses yet message.', 'start': 422.176, 'duration': 3.502}, {'end': 427.959, 'text': "Here's the message, beautiful.", 'start': 426.738, 'duration': 1.221}, {'end': 433.741, 'text': 'Now this attribute in HTML also exists as a property in our DOM objects.', 'start': 427.979, 'duration': 5.762}, {'end': 441.932, 'text': 'So we can use property binding and bind this property of the underlying DOM object some expression.', 'start': 434.422, 'duration': 7.51}, {'end': 447.375, 'text': "For example here, I want to hide this first div if we don't have any courses.", 'start': 442.573, 'duration': 4.802}, {'end': 452.517, 'text': 'So courses.length equals 0.', 'start': 448.135, 'duration': 4.382}], 'summary': 'Demonstrating an alternative method to show or hide page elements using the hidden attribute and property binding, instead of the ng if directive, with a specific example of hiding a div based on the number of courses.', 'duration': 56.926, 'max_score': 395.591, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk395591.jpg'}, {'end': 480.748, 'src': 'heatmap', 'start': 452.517, 'weight': 0.719, 'content': [{'end': 457.379, 'text': 'Now similarly, we can hide the second div if we have at least one course.', 'start': 452.517, 'duration': 4.862}, {'end': 462.281, 'text': 'So courses.length greater than 0.', 'start': 458.019, 'duration': 4.262}, {'end': 465.923, 'text': 'Now back in the app component, currently we have two items here.', 'start': 462.281, 'duration': 3.642}, {'end': 468.324, 'text': "Let's see if the application is working properly.", 'start': 466.523, 'duration': 1.801}, {'end': 472.597, 'text': 'so we get the list of courses beautiful.', 'start': 469.813, 'duration': 2.784}, {'end': 473.698, 'text': 'now back in app components.', 'start': 472.597, 'duration': 1.101}, {'end': 480.748, 'text': "I'm going to empty this array save and back in the browser no courses yet beautiful.", 'start': 473.698, 'duration': 7.05}], 'summary': 'Application displays list of courses, with condition to hide second div if at least one course exists.', 'duration': 28.231, 'max_score': 452.517, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk452517.jpg'}, {'end': 509.796, 'src': 'embed', 'start': 480.748, 'weight': 1, 'content': [{'end': 482.61, 'text': 'now let me show you something.', 'start': 480.748, 'duration': 1.862}, {'end': 483.772, 'text': "let's inspect this element.", 'start': 482.61, 'duration': 1.162}, {'end': 488.417, 'text': 'Note that both divs exist in our DOM.', 'start': 485.153, 'duration': 3.264}, {'end': 492.421, 'text': "But the first div has the hidden attribute and that's why it's hidden.", 'start': 489.138, 'duration': 3.283}, {'end': 497.366, 'text': "So that's the main difference between using ngif and the hidden property.", 'start': 493.122, 'duration': 4.244}, {'end': 504.794, 'text': 'When we use ngif on an element, if the condition evaluates to falsy, that element is removed from the DOM.', 'start': 498.147, 'duration': 6.647}, {'end': 509.796, 'text': "whereas when we use the hidden attribute, the element is in the DOM, it's just hidden.", 'start': 505.535, 'duration': 4.261}], 'summary': 'Ngif removes element from dom if condition is falsy, hidden attribute keeps element in dom but hidden.', 'duration': 29.048, 'max_score': 480.748, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk480748.jpg'}, {'end': 620.237, 'src': 'embed', 'start': 592.299, 'weight': 2, 'content': [{'end': 597.482, 'text': "If you're working with a large tree, first check to see if building that tree is going to be costly or not.", 'start': 592.299, 'duration': 5.183}, {'end': 601.844, 'text': "If it's costly, use the hidden property to keep it in the DOM, but hide it.", 'start': 597.942, 'duration': 3.902}, {'end': 607.206, 'text': "Otherwise, it's better to use ngif to remove it from the DOM and free up the resources.", 'start': 602.524, 'duration': 4.682}, {'end': 615.355, 'text': 'In Angular we have another directive called ngSwitchCase,', 'start': 610.993, 'duration': 4.362}, {'end': 620.237, 'text': 'which is very similar to the concept of switch case we have in a lot of programming languages.', 'start': 615.355, 'duration': 4.882}], 'summary': 'In angular, consider cost before using ngif or ngswitchcase.', 'duration': 27.938, 'max_score': 592.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk592299.jpg'}], 'start': 395.591, 'title': 'Optimizing dom manipulation in angular', 'summary': 'Compares using hidden attribute and ngif in angular, emphasizing their impact on memory and computing resources. it also provides guidance on optimizing dom manipulation based on the size and cost of the dom tree.', 'chapters': [{'end': 480.748, 'start': 395.591, 'title': 'Using hidden attribute to show/hide page elements', 'summary': 'Explains how to use the hidden attribute in html to show or hide parts of a page, demonstrating its application in binding properties to the underlying dom objects and using it instead of the ng if directive, resulting in the ability to hide divs based on conditions like courses.length equals 0 or courses.length greater than 0.', 'duration': 85.157, 'highlights': ['The hidden attribute in HTML can be used to show or hide parts of a page, allowing the hiding of divs, as demonstrated in the lecture.', 'Using property binding, the hidden attribute can be bound to the underlying DOM objects, such as hiding the first div when courses.length equals 0 and hiding the second div when courses.length greater than 0.', "The lecture illustrates the practical application of the hidden attribute by showing the 'no courses yet' message based on the conditions set.", 'The demonstration showcases the functionality of the hidden attribute in the app component, allowing dynamic hiding and showing of page elements based on the array content.']}, {'end': 546.591, 'start': 480.748, 'title': 'Angular ngif vs hidden attribute', 'summary': "Explains the difference between using ngif and the hidden property in angular, highlighting that ngif removes the element from the dom if the condition is falsy, while the hidden attribute keeps the element in the dom but hidden. it also emphasizes that when working with a large tree with many children, it's better to use ngif to save memory and computing resources.", 'duration': 65.843, 'highlights': ['NgIf removes element from DOM if condition is falsy When using ngIf, if the condition evaluates to falsy, the element is removed from the DOM.', "Hidden attribute keeps element in DOM but hidden The hidden attribute keeps the element in the DOM, but it's hidden from the user's view.", "Use ngIf for large trees with many children to save memory and resources When working with a large tree with a lot of children, it's better to use ngIf to prevent unnecessary memory and computing resource usage.", 'Angular continues change tracking on elements in the DOM Even when elements are hidden in the DOM, Angular continues to perform change tracking on these elements.']}, {'end': 615.355, 'start': 547.091, 'title': 'Optimizing dom manipulation in angular', 'summary': 'Discusses the optimization of dom manipulation in angular, highlighting the use of ngif and hidden attribute based on the size of the dom tree and the cost of building it, emphasizing that for small tree of objects, the approach is based on personal preference, while for large trees, the decision should be based on the cost of building the tree.', 'duration': 68.264, 'highlights': ['For small tree of objects, the choice of approach depends on personal preference. The chapter emphasizes that when dealing with a small tree of objects, the choice between using ngif and hidden attribute is based purely on personal preference.', 'Check the cost of building the tree when working with a large tree. The importance of evaluating the cost of building a large tree in Angular is highlighted, suggesting that if it is costly, the hidden property should be used to keep it in the DOM and hidden, otherwise ngif should be used to remove it from the DOM and free up resources.']}], 'duration': 219.764, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk395591.jpg', 'highlights': ['Using property binding, the hidden attribute can be bound to the underlying DOM objects, such as hiding the first div when courses.length equals 0 and hiding the second div when courses.length greater than 0.', 'NgIf removes element from DOM if condition is falsy When using ngIf, if the condition evaluates to falsy, the element is removed from the DOM.', 'Check the cost of building the tree when working with a large tree. The importance of evaluating the cost of building a large tree in Angular is highlighted, suggesting that if it is costly, the hidden property should be used to keep it in the DOM and hidden, otherwise ngif should be used to remove it from the DOM and free up resources.', 'The demonstration showcases the functionality of the hidden attribute in the app component, allowing dynamic hiding and showing of page elements based on the array content.']}, {'end': 981.44, 'segs': [{'end': 668.094, 'src': 'embed', 'start': 637.364, 'weight': 0, 'content': [{'end': 640.566, 'text': 'So let me show you how to implement this with ngSwitchCase.', 'start': 637.364, 'duration': 3.202}, {'end': 648.892, 'text': 'And by the way, you can implement the exact same thing with ngIf, but ngIf works only if you have a truthy and a falsy condition.', 'start': 641.087, 'duration': 7.805}, {'end': 656.077, 'text': "In this case, we might have multiple tabs, so we cannot implement that using ngIf, and that's why we need ngSwitchCase.", 'start': 649.592, 'duration': 6.485}, {'end': 662.672, 'text': 'So in app component on HTML, I want to add some basic markup to render bootstrap tabs.', 'start': 657.27, 'duration': 5.402}, {'end': 668.094, 'text': 'So here we want a UL and this UL should have two classes.', 'start': 663.452, 'duration': 4.642}], 'summary': 'Demonstrating implementation of ngswitchcase and ngif for rendering tabs with bootstrap.', 'duration': 30.73, 'max_score': 637.364, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk637364.jpg'}, {'end': 711.356, 'src': 'heatmap', 'start': 663.452, 'weight': 0.796, 'content': [{'end': 668.094, 'text': 'So here we want a UL and this UL should have two classes.', 'start': 663.452, 'duration': 4.642}, {'end': 673.976, 'text': 'So we add .nav and also .nav-pills.', 'start': 668.514, 'duration': 5.462}, {'end': 677.637, 'text': 'This syntax you see here is what we call Zen coding.', 'start': 674.716, 'duration': 2.921}, {'end': 680.698, 'text': 'And with this, we can quickly generate HTML markup.', 'start': 677.937, 'duration': 2.761}, {'end': 684.36, 'text': 'So tab, now we have a UL with these two classes.', 'start': 681.119, 'duration': 3.241}, {'end': 692.665, 'text': 'now, inside this ul we want an li and inside this li we want an anchor.', 'start': 685.36, 'duration': 7.305}, {'end': 701.31, 'text': 'now we want two of these elements, so i put them in parentheses times two tab, and this is what we get now.', 'start': 692.665, 'duration': 8.645}, {'end': 711.356, 'text': 'let me temporarily make the first li active, so i apply the active class here and name this map view.', 'start': 701.31, 'duration': 10.046}], 'summary': 'Using zen coding, quickly generate html markup with classes and elements.', 'duration': 47.904, 'max_score': 663.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk663452.jpg'}, {'end': 813.022, 'src': 'embed', 'start': 785.233, 'weight': 1, 'content': [{'end': 790.055, 'text': 'So Angular adds a new property to our DOM elements that is not part of the standard DOM.', 'start': 785.233, 'duration': 4.822}, {'end': 793.337, 'text': 'This property is called ngSwitch.', 'start': 790.655, 'duration': 2.682}, {'end': 803.44, 'text': 'We can use property binding ngSwitch and bind this to a field in our class like view mode.', 'start': 793.997, 'duration': 9.443}, {'end': 813.022, 'text': "now on each div we'll apply ng switch case directive and because with this directive we add or remove a dom element,", 'start': 803.44, 'duration': 9.582}], 'summary': 'Angular introduces ngswitch property to dom elements for dynamic element manipulation.', 'duration': 27.789, 'max_score': 785.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk785233.jpg'}, {'end': 930.282, 'src': 'embed', 'start': 904.676, 'weight': 2, 'content': [{'end': 912.022, 'text': "okay, and similarly for the other li, i'm going to add another class binding, class that active.", 'start': 904.676, 'duration': 7.346}, {'end': 916.026, 'text': 'we set this if view mode equals list.', 'start': 912.022, 'duration': 4.004}, {'end': 921.475, 'text': 'Now, finally, when we click these links here, we want to change the view mode.', 'start': 917.352, 'duration': 4.123}, {'end': 924.698, 'text': "So let's remove this href attribute.", 'start': 922.096, 'duration': 2.602}, {'end': 930.282, 'text': 'We use event binding and bind the click event to an expression.', 'start': 925.619, 'duration': 4.663}], 'summary': 'Adding class binding and event binding for changing view mode.', 'duration': 25.606, 'max_score': 904.676, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk904676.jpg'}], 'start': 615.355, 'title': 'Angular tab navigation and dynamic rendering', 'summary': "Covers implementing tab navigation using ngswitchcase and dynamically rendering html elements using angular directives, with examples showcasing switching between 'map' and 'list' view modes for a seamless user interface experience.", 'chapters': [{'end': 662.672, 'start': 615.355, 'title': 'Angular ngswitchcase for tab navigation', 'summary': "Explains how to implement tab navigation using ngswitchcase in angular, which is used when there are multiple tabs and a truthy/falsy condition won't suffice, showcasing the concept through a map view and list view example.", 'duration': 47.317, 'highlights': ['The ngSwitchCase is used to implement tab navigation in Angular, allowing for the display of different content based on the selected tab, such as map view and list view.', 'The chapter highlights the limitations of using ngIf for tab navigation when dealing with multiple tabs, emphasizing the need for ngSwitchCase in such scenarios.']}, {'end': 981.44, 'start': 663.452, 'title': 'Angular dynamic rendering', 'summary': "Explains how to dynamically render html elements using angular directives like ngswitch and event binding, allowing for the dynamic switching between 'map' and 'list' view modes with the 'active' class being applied accordingly, achieving a seamless user interface experience.", 'duration': 317.988, 'highlights': ["Explaining ngSwitch directive and its usage for dynamic element rendering. The chapter explains the usage of ngSwitch directive for dynamically rendering HTML elements based on the value of 'view mode' field, allowing for conditional rendering of 'map' and 'list' divs.", "Demonstrating the implementation of class binding for dynamically adding the 'active' class based on the 'view mode' value. The chapter demonstrates the use of class binding to dynamically add the 'active' class to the 'map' or 'list' view link based on the value of 'view mode', ensuring the visual indication of the selected view mode.", "Illustrating event binding for dynamically changing the 'view mode' when the links are clicked. The chapter illustrates the use of event binding to dynamically change the 'view mode' between 'map' and 'list' modes when the respective links are clicked, enabling seamless switching between the two view modes."]}], 'duration': 366.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk615355.jpg', 'highlights': ['The ngSwitchCase is used to implement tab navigation in Angular, allowing for the display of different content based on the selected tab, such as map view and list view.', "Explaining ngSwitch directive and its usage for dynamic element rendering. The chapter explains the usage of ngSwitch directive for dynamically rendering HTML elements based on the value of 'view mode' field, allowing for conditional rendering of 'map' and 'list' divs.", "Demonstrating the implementation of class binding for dynamically adding the 'active' class based on the 'view mode' value. The chapter demonstrates the use of class binding to dynamically add the 'active' class to the 'map' or 'list' view link based on the value of 'view mode', ensuring the visual indication of the selected view mode.", "Illustrating event binding for dynamically changing the 'view mode' when the links are clicked. The chapter illustrates the use of event binding to dynamically change the 'view mode' between 'map' and 'list' modes when the respective links are clicked, enabling seamless switching between the two view modes.", 'The chapter highlights the limitations of using ngIf for tab navigation when dealing with multiple tabs, emphasizing the need for ngSwitchCase in such scenarios.']}, {'end': 1272.179, 'segs': [{'end': 1014.063, 'src': 'embed', 'start': 982.781, 'weight': 1, 'content': [{'end': 990.244, 'text': 'With this, this other div that we applied ng switch default directive to, this one should be rendered.', 'start': 982.781, 'duration': 7.463}, {'end': 994.466, 'text': 'So look, we get the otherwise message here.', 'start': 991.164, 'duration': 3.302}, {'end': 1003.457, 'text': "So here's the lesson, if you want to compare the value of a field or a property against multiple values, use the ngSwitchCase directive.", 'start': 995.512, 'duration': 7.945}, {'end': 1010.481, 'text': 'Alright, you have seen the ng4 directive before.', 'start': 1008.059, 'duration': 2.422}, {'end': 1014.063, 'text': 'We use this directive to render a list of objects.', 'start': 1010.501, 'duration': 3.562}], 'summary': 'Use ngswitchcase for comparing values, and ng4 for rendering lists.', 'duration': 31.282, 'max_score': 982.781, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk982781.jpg'}, {'end': 1077.948, 'src': 'embed', 'start': 1041.598, 'weight': 0, 'content': [{'end': 1042.72, 'text': "Now I'm going to duplicate this.", 'start': 1041.598, 'duration': 1.122}, {'end': 1048.845, 'text': 'So ID two and three, and obviously course two and course three.', 'start': 1044.481, 'duration': 4.364}, {'end': 1053.467, 'text': "now let's use the ng4 directive to render these on the view.", 'start': 1049.685, 'duration': 3.782}, {'end': 1056.649, 'text': 'so app.component.html.', 'start': 1053.467, 'duration': 3.182}, {'end': 1063.594, 'text': 'we want to have a ul and inside this ul we need an li tab.', 'start': 1056.649, 'duration': 6.945}, {'end': 1065.154, 'text': "that's the markup.", 'start': 1063.594, 'duration': 1.56}, {'end': 1077.948, 'text': 'now we add ng4 and here as the value we type let course of courses and then we can use interpolation to render the name of each course.', 'start': 1065.154, 'duration': 12.794}], 'summary': 'Duplicated two and three courses, used ng4 directive for rendering on view.', 'duration': 36.35, 'max_score': 1041.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk1041598.jpg'}, {'end': 1130.959, 'src': 'embed', 'start': 1103.096, 'weight': 2, 'content': [{'end': 1109.342, 'text': 'you want to highlight the odd or even rows, or maybe you want to display an index next to each object.', 'start': 1103.096, 'duration': 6.246}, {'end': 1113.186, 'text': 'we can use the exported values from ng for directive.', 'start': 1109.342, 'duration': 3.844}, {'end': 1117.67, 'text': 'so here, after this expression, we add semicolon.', 'start': 1113.186, 'duration': 4.484}, {'end': 1120.473, 'text': 'one of these exported values is index.', 'start': 1117.67, 'duration': 2.803}, {'end': 1122.875, 'text': 'so we type index.', 'start': 1120.473, 'duration': 2.402}, {'end': 1125.516, 'text': 'now we need to alias this to a local variable.', 'start': 1122.875, 'duration': 2.641}, {'end': 1130.959, 'text': 'So we type as, and then the name of our local variable, like i.', 'start': 1125.876, 'duration': 5.083}], 'summary': 'Using ng for directive to display index for odd or even rows.', 'duration': 27.863, 'max_score': 1103.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk1103096.jpg'}, {'end': 1188.217, 'src': 'embed', 'start': 1158.387, 'weight': 3, 'content': [{'end': 1161.009, 'text': 'now index is one of these exported values.', 'start': 1158.387, 'duration': 2.622}, {'end': 1162.65, 'text': 'there are several other.', 'start': 1161.009, 'duration': 1.641}, {'end': 1166.233, 'text': 'let me show you how you can find the list of all these exported values.', 'start': 1162.65, 'duration': 3.583}, {'end': 1175.325, 'text': 'So if you head over to angular.io, in this search box you can search for ng4 of directive.', 'start': 1167.438, 'duration': 7.887}, {'end': 1183.392, 'text': "That's the name of our directive, even though in html we use ng4, but the actual name of this directive is ng4 of.", 'start': 1175.826, 'duration': 7.566}, {'end': 1188.217, 'text': 'And you can see that here, it has a d icon which indicates a directive.', 'start': 1184.333, 'duration': 3.884}], 'summary': 'Learn how to find exported values on angular.io, such as ng4 of directive.', 'duration': 29.83, 'max_score': 1158.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk1158387.jpg'}, {'end': 1272.179, 'src': 'heatmap', 'start': 1244.572, 'weight': 4, 'content': [{'end': 1254.239, 'text': 'now in your applications you might want to render a table so you can use this variable is even and apply some style or some class to even rows in your table.', 'start': 1244.572, 'duration': 9.667}, {'end': 1266.736, 'text': "now let's try this back in the browser so you can see in front of the first and the third rows we have this label even Alright.", 'start': 1254.239, 'duration': 12.497}, {'end': 1272.179, 'text': 'now let me show you how this ng4 directive responds to the changes in the component state.', 'start': 1266.736, 'duration': 5.443}], 'summary': 'Demonstrating rendering a table with conditional styling using ng4 directive.', 'duration': 27.607, 'max_score': 1244.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk1244572.jpg'}], 'start': 982.781, 'title': 'Angular directives and ng4 directive', 'summary': 'Covers the usage of ngswitchcase and ng4 directives, rendering multiple values and exporting values, and demonstrates rendering a list of objects using ng4 directive. it also explains how to find and utilize exported values like index, first, last, even, and odd, with a total of 3 courses rendered on the screen.', 'chapters': [{'end': 1158.387, 'start': 982.781, 'title': 'Angular directives overview', 'summary': 'Explains the usage of ngswitchcase and ng4 directives, including rendering multiple values and exporting values, and demonstrates rendering a list of objects using ng4 directive, with a total of 3 courses rendered on the screen.', 'duration': 175.606, 'highlights': ['Rendering a list of objects using ng4 directive The chapter demonstrates using the ng4 directive to render a list of objects, with a total of 3 courses rendered on the screen.', 'Usage of ngSwitchCase directive for comparing values The chapter explains the lesson of using the ngSwitchCase directive for comparing the value of a field or property against multiple values.', 'Exporting values from ng4 directive The chapter explains that the ng4 directive exports values such as index, which can be used to display the index next to each object in the list.']}, {'end': 1272.179, 'start': 1158.387, 'title': 'Ng4 directive and exported values', 'summary': 'Explains the ng4 directive in angular, demonstrating how to find a list of exported values, including index, first, last, even, and odd, and how to utilize these values, such as highlighting even rows in a table and applying changes in the component state.', 'duration': 113.792, 'highlights': ['The ng4 directive in Angular provides access to exported values such as index, first, last, even, and odd, which can be utilized in rendering tables and applying styles to even rows.', 'The even variable provided by the ng4 directive is a boolean, unlike the index variable which is a number, allowing for conditional rendering and styling based on the row position in a table.', "Demonstrating the utilization of the ng4 directive by rendering a table and highlighting even rows using the 'is even' local variable, showcasing practical application for styling and class application in Angular components."]}], 'duration': 289.398, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk982781.jpg', 'highlights': ['Rendering a list of objects using ng4 directive The chapter demonstrates using the ng4 directive to render a list of objects, with a total of 3 courses rendered on the screen.', 'Usage of ngSwitchCase directive for comparing values The chapter explains the lesson of using the ngSwitchCase directive for comparing the value of a field or property against multiple values.', 'The ng4 directive in Angular provides access to exported values such as index, first, last, even, and odd, which can be utilized in rendering tables and applying styles to even rows.', 'Exporting values from ng4 directive The chapter explains that the ng4 directive exports values such as index, which can be used to display the index next to each object in the list.', 'The even variable provided by the ng4 directive is a boolean, unlike the index variable which is a number, allowing for conditional rendering and styling based on the row position in a table.', "Demonstrating the utilization of the ng4 directive by rendering a table and highlighting even rows using the 'is even' local variable, showcasing practical application for styling and class application in Angular components."]}, {'end': 1509.948, 'segs': [{'end': 1335.617, 'src': 'heatmap', 'start': 1281.084, 'weight': 1, 'content': [{'end': 1288.087, 'text': 'So here we can handle the click event and bind this to a method called onAdd.', 'start': 1281.084, 'duration': 7.003}, {'end': 1293.89, 'text': "Okay? Now back in the component, let's add this new method here.", 'start': 1289.448, 'duration': 4.442}, {'end': 1302.172, 'text': 'So onAdd We call this that courses that push and push the new object here.', 'start': 1294.171, 'duration': 8.001}, {'end': 1310.576, 'text': 'ID for a name is going to be course for save back in the browser.', 'start': 1302.492, 'duration': 8.084}, {'end': 1313.173, 'text': 'So here we have three courses.', 'start': 1312.073, 'duration': 1.1}, {'end': 1316.354, 'text': 'When I click the add button, we get a new course here.', 'start': 1313.293, 'duration': 3.061}, {'end': 1319.734, 'text': 'So Angular has this change detection mechanism.', 'start': 1317.314, 'duration': 2.42}, {'end': 1327.816, 'text': 'So whenever you click a button or whenever an AJAX request or a timer function completes, Angular performs its change detection.', 'start': 1320.314, 'duration': 7.502}, {'end': 1330.016, 'text': 'It looks at our component.', 'start': 1328.956, 'duration': 1.06}, {'end': 1333.857, 'text': 'It knows that this course is filled now has a new object.', 'start': 1330.656, 'duration': 3.201}, {'end': 1335.617, 'text': "That's the course with ID four.", 'start': 1334.317, 'duration': 1.3}], 'summary': 'Handling click event to add new course, triggering change detection in angular.', 'duration': 62.498, 'max_score': 1281.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk1281084.jpg'}, {'end': 1505.237, 'src': 'embed', 'start': 1460.252, 'weight': 0, 'content': [{'end': 1462.913, 'text': 'So when we click this, the name of the course changes.', 'start': 1460.252, 'duration': 2.661}, {'end': 1465.695, 'text': 'Again, this is change detection in action.', 'start': 1463.474, 'duration': 2.221}, {'end': 1470.418, 'text': "In the next lecture, we're going to look at this change detection from a performance point of view.", 'start': 1466.416, 'duration': 4.002}, {'end': 1476.4, 'text': 'Hi, thank you for watching my Angular tutorial.', 'start': 1474.059, 'duration': 2.341}, {'end': 1479.861, 'text': 'If you enjoyed this video, please like it and share it with others.', 'start': 1476.88, 'duration': 2.981}, {'end': 1484.362, 'text': 'Also, you can subscribe to my channel for free new videos every week.', 'start': 1480.441, 'duration': 3.921}, {'end': 1493.584, 'text': 'This video is part of my complete Angular course with almost 30 hours of high quality content, where you will learn everything about Angular,', 'start': 1485.002, 'duration': 8.582}, {'end': 1499.326, 'text': "from the basic to the advanced topics, all in one course, so you don't have to jump from one tutorial to another.", 'start': 1493.584, 'duration': 5.742}, {'end': 1505.237, 'text': "In case you're interested, you can get this course with a big discount using the link in the video description.", 'start': 1499.986, 'duration': 5.251}], 'summary': 'Angular tutorial with almost 30 hours of high quality content, offering a big discount.', 'duration': 44.985, 'max_score': 1460.252, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk1460252.jpg'}], 'start': 1273.119, 'title': 'Adding new course button and angular change detection', 'summary': "Discusses adding a new course to a list using a button and handling the click event, resulting in the addition of a new course with id four. it also explores angular's change detection mechanism, demonstrating automatic updates to the dom and highlighting a comprehensive angular course with almost 30 hours of content.", 'chapters': [{'end': 1335.617, 'start': 1273.119, 'title': 'Adding new course button', 'summary': 'Discusses adding a new course to a list using a button and handling the click event to trigger a method that updates the list, resulting in the addition of a new course with id four.', 'duration': 62.498, 'highlights': ['The chapter discusses adding a new course to a list using a button and handling the click event to trigger a method that updates the list, resulting in the addition of a new course with ID four.', 'Angular has a change detection mechanism that triggers whenever a button is clicked, an AJAX request is made, or a timer function completes, allowing it to detect and update changes in the component.', "The method 'onAdd' is used to handle the click event of the button and is bound to the action of adding a new course to the list."]}, {'end': 1509.948, 'start': 1337.517, 'title': 'Angular change detection', 'summary': "Explores angular's change detection mechanism, demonstrating the removal and modification of course items resulting in automatic updates to the dom, and also highlights the availability of a comprehensive angular course with almost 30 hours of content.", 'duration': 172.431, 'highlights': ["Angular's change detection mechanism automatically updates the DOM when an object is removed or modified, exemplified by the removal and modification of course items, showcasing Angular's efficient handling of DOM updates.", 'A comprehensive Angular course with almost 30 hours of high-quality content is available, offering a one-stop solution for learning everything about Angular, with the ability to obtain the course at a discounted price through the link in the video description.', 'The instructor encourages viewers to like, share, and subscribe to the channel for free new videos every week, fostering engagement and growth of the learning community.']}], 'duration': 236.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/LtT01ZCHRjk/pics/LtT01ZCHRjk1273119.jpg', 'highlights': ['A comprehensive Angular course with almost 30 hours of high-quality content is available, offering a one-stop solution for learning everything about Angular, with the ability to obtain the course at a discounted price through the link in the video description.', "Angular's change detection mechanism automatically updates the DOM when an object is removed or modified, exemplified by the removal and modification of course items, showcasing Angular's efficient handling of DOM updates.", 'The chapter discusses adding a new course to a list using a button and handling the click event to trigger a method that updates the list, resulting in the addition of a new course with ID four.', 'Angular has a change detection mechanism that triggers whenever a button is clicked, an AJAX request is made, or a timer function completes, allowing it to detect and update changes in the component.', "The method 'onAdd' is used to handle the click event of the button and is bound to the action of adding a new course to the list.", 'The instructor encourages viewers to like, share, and subscribe to the channel for free new videos every week, fostering engagement and growth of the learning community.']}], 'highlights': ['The chapter covers the detailed explanation of built-in directives in Angular including ng4, ngIf, ngSwitchCase, ngClass, and ngStyle.', 'Demonstrates the rendering and removal of elements based on conditions using ng if.', 'Introduces a cleaner and more consistent syntax for implementing ng if and else.', 'The chapter explains the usage of ng4 for rendering lists and the importance of modifying the structure of the DOM.', 'The chapter introduces the concept of structural and attribute directives, emphasizing the role of structural directives in modifying the structure of the DOM.', 'The chapter emphasizes the purpose of ngIf in showing or hiding parts of a page based on a condition.', 'The chapter highlights the significance of building custom directives in Angular.', 'Provides an overview of the built-in directives in Angular, highlighting their significance in manipulating the DOM.', 'Using property binding, the hidden attribute can be bound to the underlying DOM objects, such as hiding the first div when courses.length equals 0 and hiding the second div when courses.length greater than 0.', 'NgIf removes element from DOM if condition is falsy When using ngIf, if the condition evaluates to falsy, the element is removed from the DOM.', 'Check the cost of building the tree when working with a large tree. The importance of evaluating the cost of building a large tree in Angular is highlighted, suggesting that if it is costly, the hidden property should be used to keep it in the DOM and hidden, otherwise ngif should be used to remove it from the DOM and free up resources.', 'The demonstration showcases the functionality of the hidden attribute in the app component, allowing dynamic hiding and showing of page elements based on the array content.', 'The ngSwitchCase is used to implement tab navigation in Angular, allowing for the display of different content based on the selected tab, such as map view and list view.', "Explaining ngSwitch directive and its usage for dynamic element rendering. The chapter explains the usage of ngSwitch directive for dynamically rendering HTML elements based on the value of 'view mode' field, allowing for conditional rendering of 'map' and 'list' divs.", "Demonstrating the implementation of class binding for dynamically adding the 'active' class based on the 'view mode' value. The chapter demonstrates the use of class binding to dynamically add the 'active' class to the 'map' or 'list' view link based on the value of 'view mode', ensuring the visual indication of the selected view mode.", "Illustrating event binding for dynamically changing the 'view mode' when the links are clicked. The chapter illustrates the use of event binding to dynamically change the 'view mode' between 'map' and 'list' modes when the respective links are clicked, enabling seamless switching between the two view modes.", 'The chapter highlights the limitations of using ngIf for tab navigation when dealing with multiple tabs, emphasizing the need for ngSwitchCase in such scenarios.', 'Rendering a list of objects using ng4 directive The chapter demonstrates using the ng4 directive to render a list of objects, with a total of 3 courses rendered on the screen.', 'Usage of ngSwitchCase directive for comparing values The chapter explains the lesson of using the ngSwitchCase directive for comparing the value of a field or property against multiple values.', 'The ng4 directive in Angular provides access to exported values such as index, first, last, even, and odd, which can be utilized in rendering tables and applying styles to even rows.', 'Exporting values from ng4 directive The chapter explains that the ng4 directive exports values such as index, which can be used to display the index next to each object in the list.', 'The even variable provided by the ng4 directive is a boolean, unlike the index variable which is a number, allowing for conditional rendering and styling based on the row position in a table.', "Demonstrating the utilization of the ng4 directive by rendering a table and highlighting even rows using the 'is even' local variable, showcasing practical application for styling and class application in Angular components.", 'A comprehensive Angular course with almost 30 hours of high-quality content is available, offering a one-stop solution for learning everything about Angular, with the ability to obtain the course at a discounted price through the link in the video description.', "Angular's change detection mechanism automatically updates the DOM when an object is removed or modified, exemplified by the removal and modification of course items, showcasing Angular's efficient handling of DOM updates.", 'The chapter discusses adding a new course to a list using a button and handling the click event to trigger a method that updates the list, resulting in the addition of a new course with ID four.', 'Angular has a change detection mechanism that triggers whenever a button is clicked, an AJAX request is made, or a timer function completes, allowing it to detect and update changes in the component.', "The method 'onAdd' is used to handle the click event of the button and is bound to the action of adding a new course to the list.", 'The instructor encourages viewers to like, share, and subscribe to the channel for free new videos every week, fostering engagement and growth of the learning community.']}