AppDividend
Latest Code Tutorials

Angular Components Tutorial Example From Scratch

1,063

Get real time updates directly on you device, subscribe now.

Angular Components Tutorial Example From Scratch is today’s leading topic. When you install the project via Angular CLI then by default, we got one component that is app component. Components are smallest pieces in the Angular Application. We can define the Components in Typescript file. Components are just regular TypeScript class but with the Component Decorator. It differentiates standard class from the component class.

Angular Components Tutorial

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 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 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 and what is the Style URL. All the data described in the Metadata.

Apart from metadata, it contains typescript class. The class comprises of properties and methods. It is an essential TypeScript class. We can access its property in the template. In above’s example 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 as HTML tag. In above’s example, app-root is a selector, and we can use 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 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 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, own css and own 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.