Angular Components

Angular components are the main building blocks of Angular apps. It is what you “see” in the browser. A component is made up of…

• A Class (usually TypeScript)
• An HTML file (view)
• A CSS file (optional)

In Angular, a component is a type of directive that has its own template.

Component Creation

You can use the Angular CLI to create a component…

// ComponentName can be whatever you want to call your component
ng g component ComponentName

While not the only structure of a component, it will generate the following component TypeScript code as it is the most used configuration…

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-ComponentName',
  tempateUrl: './componentname.component.html',
  styleUrls: ['./componentnanme.component.css']
})
export class ComponentNameComponent implements OnInit {
  
  constructor() {}

  ngOnInit() { }
  
}

A component class is decorated with the @component decorator. Angular uses four steps to create a component…

• Create class with all data and logic…export it
• Decorate class with metadata (@component)
• Import libraries and modules
• Create template (HTML) and styles (CSS)

Once you have an NgModule, you create a main app component and you are well on your way creating Angular apps!

Happy Coding!

Clay Hess