Angular Tab Component Overview

Angular5 - 6

Share this video with your friends

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.

felikf

~ 6 years ago

Is there any difference between:

<div [hidden]="!active" class="pane"> and
<div *ngIf="active" class="pane"> ?

I personally would go with *ngIf ...

Thanks.

Juri Strumpflohner(instructor)

~ 6 years ago

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 :)

felikf

~ 6 years ago

OK, thank you.

Ryan

~ 6 years ago

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

Ryan

~ 6 years ago

Got it! attr.aria-selected="{{tab.active }}" Thanks Juri!

Stephen

~ 6 years ago

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.

Juri Strumpflohner(instructor)

~ 6 years ago

@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

~ 6 years ago

@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.

Juri Strumpflohner(instructor)

~ 6 years ago

@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.

BeSaRa

~ 3 years ago

im trying to *ngIf ngx-tab based on condition from parent component I got ExpressionChangedAfterItHasBeenCheckedError, please advise