AppDividend
Latest Code Tutorials

Angular 9/8/7/6/5 Components Example For Beginners

0

Angular Component controls a patch of the screen called a view. For example, individual components define and control each view. When you install the project via Angular CLI, then by default, we got one component that is an app component. 

Angular Components are the smallest pieces in the Angular Application. We can define the Components in the Typescript file.

Components are just regular TypeScript classes but with the Component Decorator. It differentiates standard class from the component class.

Angular Components Example

If you analyze the app.component.ts file, you will see something like this.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

Here Component is defined by a decorator @Component. It contains Metadata

Angular Application reads this and identifies this class as a component class.

Component = Class + Metadata + Template

So it is a combination of the above three terminologies.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

In the above’s example, first, we have imported a Component module from the angular core module. Then we have defined decorator and described the Metadata. Metadata contains three things.

  1. selector
  2. templateUrl
  3. styleUrls

So it described as a which selector this Component uses and what is the template URL is and what the Style URL. All the data described in the Metadata.

Apart from Metadata, it contains a Typescript class. The class comprises of properties and methods. It is an essential TypeScript class. We can access its property in the template.

In the above’s example, the title is the property, and we can access this property in the app.component.html file.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

selector

It defines an HTML tag. In the above’s example, the app-root is a selector, and we can use it as a tag in the HTML file.

templateUrl

It represents a view of the Component. We need to give the path of the HTML file. So, we can say it is the view of the MVC architecture. We can see Component as a Controller, and we can also define the Model as a Data of the Component.

styleUrls

We give the path of the particular CSS file for a particular component.

New Angular Component Creation.

If you are using AngularCLI, then we can hit the following command in the terminal to generate a new component.

ng g c start

It will generate the following files.

create src/app/start/start.component.html (24 bytes)
create src/app/start/start.component.spec.ts (621 bytes)
create src/app/start/start.component.ts (265 bytes)
create src/app/start/start.component.css (0 bytes)

Here, automatic Angular will register this Component for us in the app.module.ts file. So when we create a new component, we need to register in the file. Otherwise, it will not work.

// app.module.ts

import { StartComponent } from './start/start.component';

declarations: [
    AppComponent,
    StartComponent
],

This Component has its view, its css and it’s logic or controller file.

For more information, visit its Official Documentation.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.