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

Angular 2 Components

  • Those new to Angular 2 quickly see how the new component model is a lot easier to use than what we had in v1.
  • With Angular 2 components, we get a natural combination of all of these concepts: our Component has encapsulated instance data (much like isolate scopes), event handlers (much like methods attached to scopes), and a template (much like directives).
  • Instead, we provide our own root Component from which we want to start the app:

    which would look like this as a v2 component:

    What we’d often see in Angular 1 was and used on the same element, like this:

    Then, our would create some root scope data that our child controllers would access and/or extend.

  • is the core annotation, and has a few important parameters:

    The param is the replacement for the auto-naming system of directives in v1 and is now explicit: you must set it to exactly what you want the new component to be named in markup.

  • With the new component model, Angular is moving into much more familiar OO territory, and is setting itself up to work with the future of web standards, like Web Components and Shadow DOM.

Angular 2 Series: Components