{"id":1313,"date":"2023-08-14T05:00:00","date_gmt":"2023-08-14T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1313"},"modified":"2023-08-11T19:41:48","modified_gmt":"2023-08-12T02:41:48","slug":"ngswitch-directive","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/ngswitch-directive\/","title":{"rendered":"ngSwitch directive"},"content":{"rendered":"\n

The ngSwitch<\/code> directive is a good alternative to ngIf<\/code> if you have to handle more than two scenarios.<\/p>\n\n\n\n

It works similarly to a switch<\/code> statement in traditional programming languages, allowing you to define a set of cases and associate each case with a specific template block to be rendered. For instance:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

One of my favorite use cases is for basic pagination in a component (or an image carousel, for instance) where clicking on navigation buttons changes a value that triggers a different “case”:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Clicking on the buttons changes the value of page<\/code> and displays a different template. Applying this to components instead of HTML elements is especially powerful. For instance: <app-hello *ngSwitchCase=\"3\"><\/app-hello><\/code><\/p>\n\n\n\n

You can see an example in action on Stackblitz here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

The ngSwitch directive is a good alternative to ngIf if you have to handle more than two scenarios. It works similarly to a switch statement in traditional programming languages, allowing you to define a set of cases and associate each case with a specific template block to be rendered. For instance: One of my favorite […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,11],"tags":[],"class_list":["post-1313","post","type-post","status-publish","format-standard","hentry","category-angular","category-directives"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t