JavaScript Edu Resources. Angular Courses. React Tutorials. Join us!

Developing a tabs component in Angular 2

  • Let’s start right away and learn how easy it is to build a tabs component in Angular without the confusing relationship between directive link functions and controllers.
  • Having a tool like Angular (and also Web Components) allows us to create custom elements, so that a consumer could use something like the following snippet to add tabs to an application:

    We have a element that simply represents a single tab which has a title, and we have a element that takes care of making those elements actually “tabbable”.

  • If you’ve read our article on building a zippy component in Angular, you know that we need the decorator to tell Angular what the selector and template for our component should be.
  • As you can see, the component template already comes with a static list of tabs.
  • We use the directive to iterate over our tabs collection to generate a dynamic list of tab titles in the component’s template.



Developing a tabs component in Angular by thoughtram


https://twitter.com/

https://twitter.com/intent/tweet/?text=Developing%20a%20tabs%20component%20in%20Angular&url=http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html


Comments are closed, but trackbacks and pingbacks are open.