ADVERTISEMENTS

How to call components in Angular

A component is a building block of an Angular application that controls a portion of the view through its template and class. It's composed by a template, a class and metadata. To call a component in Angular, you need to use it as a directive within the template of another component. Components can be nested, meaning that a component can include other components within its template. This allows for the building of complex user interfaces by composing smaller, reusable components.

The following example will explain that a component called cstm-component with the selector app-cstm-component, you can include it in another component's template like this:

<!-- other-component.component.html -->
<div>
  <app-my-component></app-my-component>
</div>

We need to make sure that the component that you are calling is declared in the declarations array of the @NgModule decorator of the module where it is being used.

@NgModule({
  declarations: [MyComponent, OtherComponent],
  imports: [],
  providers: [],
  bootstrap: [OtherComponent]
})
export class MyModule { }

 

Supported Browsers:
  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

Angular is a javaScript framework for building single page web applications. You can learn angular from our Angular Tutorials and Angular Examples

ADVERTISEMENTS