Angular Learning Day 1: Component

Objective: In this article, you will know Component.

Pre-requisite Prior to completing this article, you should have already installed all pre-requisite tooling including: Visual Studio Code, Node Package Manager (NPM), Node, Angular CLI.

Component

• Create a component
• Register it in a module
• Add an element in an HTML markup

Step 1: After creating project, open the VS Code Editor Terminal and run ng serve

Step 2: Create a new Component courses.component.ts. This is the convention that be used angular building application. If the component have multiple word then separate them course-form.component.ts . Now creating a plain class

class CoursesComponent {

}

Once again look at naming convention. Here first letter of every word should be Capital and also by convention use the suffix Component in the name of class.

So far this is a plain class. Not a component. Now convert to component we need to add some metadata that angular understand. We use a decorator. Firstly we need a decorator on the top.

So Import -

import { Component } from @angular/core

This is the core library of the angular. Import the Component decorator. And need to apply.

Now look at the syntax.

@Component()

Like a function. This is called decorator function.

@Component({

})

Pass an object. Have one or more properties tell angular how angular works. Ex:

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

My selector for this component app-courses. This is a basic component in Angular. My first step is done.

The second step is to register this component in a Module.

The currently the application have only one module app.moudle.

app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CoursesComponent } from './courses/courses.component';

@NgModule({
  declarations: [   
    AppComponent,
      CoursesComponent
   ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once again we have three import file. Nothing special here.
Under bottom have typescript class. export class AppModule { } default AppModule

Know this is decorator function which another decorator function called @NgModule.

@NgModule({
  declarations: [   
    AppComponent,
    CoursesComponent
   ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

And know this class is decorated another decorator function @NgModule. Plan typescript class AppModule convert as a Module Angular Point of View.

Don't worry about all this properties here like declarations imports providers bootstrap.

Focus on declarations. Here add all Component part of this module.

By default when we generate a application we have one component called AppComponent.

Now we can add CoursesComponent and import top on that file.

import { CoursesComponent } from './courses/courses.component';

Don't have .ts . No need.

Here second step is done.

Now the third step.

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

This is the selector for this component which means anywhere we have an element like app-courses angular have render the template courses.component.html inside this element(app-courses). This is the external template for appComponent. Let's have a look.

app.component.html file

<h2>Angular Demo</h2>
<app-courses></app-courses>

So when angular see the element it's going to render the template of our courses component.

Output

So this is how angular application works.

Note: Short command for creating angular component in Terminal
ng g c courses

Reference
Create New Project