⚡Angular 17 Control Flow | Angular 17 New Features |Angular 17 Tutorial |Angular 17 New Control Flow

[Music] hello guys welcome to my YouTube channel if you are new to my Channel please subscribe to my channel like this video and press the Bell icon angular 17 brought a notable Improvement to the framework by introducing a feature called control flow control flow blocks allow you to conditionally show hide and repeat elements in this video I will show you how to use angular control flow in your angular 17 project so let's get started for styling I have added Tailwind CSS CDN inside index.html file in the app. component.ts file add a property user Ro of typ string and assign a value admin to this property the if block conditionally displays its content when its condition expression is truthy it starts with an net symbol in the first condition it will check if user role is admin if this condition is true it will display welcome admin if the first condition is false it will check the condition in else if block if user role is employer and if this condition is true it will display welcome employer if both the above conditions are false then it will display the statement in the else block welcome user here the user role is admin so it will display statement of if block which is welcome admin now if you change the user role to employer it will display the statement of else if block which is welcome employer now if you change the user role to candidate or any other value it will display the statement of el block which is welcome candidate because both the above conditions are false now let's see the four block similar to javascript's four of Loops angular 17 provides the at four block for rendering repeated elements here product list is an array with a list of objects each object represents a product and has properties such as ID and name the at4 block renders its content for each item in a collection collections can be any JavaScript iterable but there are performance advantages of using a regular array the at four block requires a track expression you can optionally include an at empty section immediately after the at four block content the content of the at empty block displays when there are no products in at four block track is now required angular uses the value of this expression as a unique identity for each item this identity allows the framework to perform the minimal set of Dome operations necessary after items are added removed or reordered for simple cases you can use track dollar Index as a reasonable default the at4 statement uses a new diffing algorithm and has more optimal implementation compared to Star ng4 which makes it up to 90% faster runtime for Community framework benchmarks you can see that the product ID and name are displayed illustrating the result of at 4 Loop iterating over an array of products now let's see the at switch Block in the app. component.ts file add a property shipping method of typ string and assign a value standard to this property the Syntax for at switch is similar to if inspired by the JavaScript switch statement the at switch blocks displays content selected by one of the cases matching against the conditional expression if the value of shipping method is equal to standard then the code inside the this block will be executed if the value of shipping method is equal to express then the code inside this block will be executed if the value of shipping method is equal to next day then the code inside this block will be executed if none of the above cases match the code inside this block will be executed this block serves as the default case here shipping cost is displayed 5.99 because we have assigned standard to the shipping method property if we change the value to express then the statement in case Express will be displayed if we change the value to next day then the statement in case next day will be displayed if the value is changed to any other value the statement in the default case will be displayed because none of the above cases matches the at default block is optional and can be omitted if no it case matches the expression and there is no at default block nothing is shown the at4 block replaces star N4 for iteration and has several differences compared to its structural directive ng4 predecessor the at switch block replaces NG switch with major benefits one the at switch block does not require a container element for the condition expression or each conditional template two the at switch block supports template type checking including type narrowing within each branch thanks for watching please like share and subscribe to my channel I will see you in next tutorial till then stay safe

Channel: Php Node Tuts

Views: 766

Keywords: angular 17, angular, angular 17 control flow, angular 17 new features, Angular 17 Changes, Angular 17 Featutes, angular 17 new control flow, angular 17 control flow performance, angular @if else, angular @if syntax, angular @if control flow, angular @if example, angular @if block, angular @for, angular @for syntax, angular @for loop, angular new features, angular simple project, angular project, angular tutorial, angular 17 tutorial, angular tutorial for beginners

Id: 2edMM3cXT1Q

Length: 5min 51sec (351 seconds)

Published: Mon Dec 18 2023