Angular Tab Component Overview
In this lesson we will learn about our course setup. We will briefly dive through our tabbed Angular component, which allows us to define a fixed set of static tabs. This component will serve us throughout the course as we will extend it to allow for dynamic tabs to be inserted.
Is there any difference between:
<div [hidden]="!active" class="pane">and<div *ngIf="active" class="pane">?
I personally would go with *ngIf ...
Thanks.
it depends on your situation and use case. If you use hidden, a CSS style will hide the element, while with ngIf, the entire DOM element gets destroyed. As a result, if you have another component within an ngIf area, that component would get destroyed and recreated each time you switch between tabs. Now whether that's something you'd like to have depends on your specific use case :)
OK, thank you.
Juri,
Any best practices on how to make
aria-selected = true or false
dynamic when the tab is active?
Something along the lines this psedo code:
if class active = true
then aria-selected = true
else aria-selected = false
Got it! attr.aria-selected="{{tab.active }}" Thanks Juri!
I grabbed the src files from CodeSandbox and after running npm start, I get an error message about a missing angular.json, which wasn't included with the download.
@stephen 🤔 strange. anyway, in case you can refer to my github repo where the src for the entire course are (organized in branches). https://github.com/juristr/egghead-create-dynamic-tabs-component-angular
@stephen 🤔 strange. anyway, in case you can refer to my github repo where the src for the entire course are (organized in branches). https://github.com/juristr/egghead-create-dynamic-tabs-component-angular
Thanks for that, it worked perfectly.
@stephen 👍 regarding the 'onPersonSubmit' you mentioned..nor sure whether you already found it, but it's always in the same repo here: https://github.com/juristr/egghead-create-dynamic-tabs-component-angular/blob/06-destroy-dynamic-components/src/app/people/person-edit.component.ts
there's no video about it since it's not relevant in learning about dynamic components, but rather just to have some more real world use case.
im trying to *ngIf ngx-tab based on condition from parent component I got ExpressionChangedAfterItHasBeenCheckedError, please advise