Creating Components

Search…

Creating Components

Components in Angular build upon the lessons learned from AngularJS 1.5. We define a component's application logic inside a class. To this we attach @Component, a TypeScript decorator, which allows you to modify a class or function definition and adds metadata to properties and function arguments.
selector is the element property that we use to tell Angular to create and insert an instance of this component.
template is a form of HTML that tells Angular what needs to be to rendered in the DOM.
The Component below will interpolate the value of name variable into the template between the double braces {{name}}, what get rendered in the view is <p>Hello World</p>.
1
import { Component } from "@angular/core";
2
​
3
@Component({
4
  selector: "rio-hello",
5
  template: "<p>Hello, {{name}}!</p>",
6
})
7
export class HelloComponent {
8
  name: string;
9
​
10
  constructor() {
11
    this.name = "World";
12
  }
13
}
Copied!
We need to import the Component decarator from @angular/core before we can make use of it. To use this component we simply add <rio-hello></rio-hello> to the HTML file or another template, and Angular will insert an instance of the HelloComponent view between those tags.

Components in Angular

Application Structure with Components

Last modified 3mo ago

Copy link