Component in Angular

By default when we create a new project app.component.ts file is created

AppComponent is a normal class which has been annotated with Annotation @Component
@Component takes an Object as an argumnet and has 3 properties to this object
- selector – Tag of this component is named in this property
- templateUrl – HTML file for this component
- styleUrls – css files of our HTML file (Note : It is an array)

Component is basically a TypeScript class that angular can instantiate and follow the blueprint of that class.
Component has some properties :
- selector : Tag name that the component is going to represent.
- template : The html code that is going to be replaced in place of the selector/tag
- style : The CSS that has to be applied on the template/html
When we create a project by using angular CLI we by default get <app-root> a default component/tag in the index.html file. And the Components corresponding class name is AppComponent which is stored in app.component.ts file.

Creating a new component.

Lets create a new component named users.
We can create a component via Angular CLI command but first lets create it manually.
Now as we know component is basically a TypeScript class, hence we need to create a type script file.
We will create a separate directory altogether to store all the data related to that component under the app directory.(As per conventions)
Naming convention used for creating a ts file for the component is <componentName>.component.ts
Example : user.component.ts
Now the directory structure will look something like below

Write down the below contents into the user.component.ts file

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

@Component({
    selector : 'app-user', //name of the component which will be used a tag 
    templateUrl : './user.component.html' //relative path of html file of component
})
export class UserComponent{

}

Now in the above code we have used the decorator/annotation @Component which indicates that this class will be used a component.
We need to import the component using import line
import { Component } from ‘@angular/core’;
Now we need to pass java-script object to the component decorator to configure it.
First attribute of component decorator is selector and it should have a string value.This value is used to create tag <app-user> later when this component is used. We can also use selector as, an attribute of a tag if we pass array instead of string as value to selector, as a class if we pass .name as value to the selector.
Second attribute of component decorator is templateUrl and it should also have a string value. This value should point a relative path of a external html file which will store the html data(template data) of the component.
We need to create the html(template) file ‘user.component.html’ parallel to use.component.ts file and write html code inside the html file which should be displayed when the tag/selector <app-user> is used.

Below are the contents of user.component.html

Hello User

Now we need to register the component into a module so that it can be used by Angular
We do that by adding the Component class name into the app-module.ts file which was created by default when we created the project.
app-module.ts file looks something like below.

Now as we can see we have @NgModule decorator above the AppModule class which makes it a module class.
Now we pass 4 properties into the @NgModule decorator, bootstrap property ties this AppComponent component with the index.html file, declartions properties registers all component into a module, imports property allows us to add new modules into this module.
In the declarations property we add our new component class called UserComponent which will register the new component with this module.
With all the changes our new app.module.ts will look like below

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';

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

Now we edit out app.component.html file to add our new component into it.
After editing the app.component.html file looks like below.

Now when we save and start the server, we could see the text inside user.component.html file on the screen.

Nesting of Components

We can also add component via CLI by running below command

ng generate component <component name>
or
ng g c <component name>

ng generate component users

After running the command it will automatically create the file structure

CLI automatically creates the files required for component i.e css, html and ts file along with spec.ts file which is used for testing purpose.
CLI also automatically registers the component to the root module i.e app.module.ts file in our case.
Now the app.module.ts file looks like this.

Now we can create the UsersComponent into UsersComponent just by modifying the users.component.html and app.component.html file
In app.component.html we have modified the <app-user> tag to <app-users> tag
In user.component.html we have added the <app-user> tag
Screenshots below