Create a new component in angular

If you are Not aware of basis environment set up and Hello world of angular please go through below links for the context.


1 . angular-4/5/6-set-up-environment
2 . angular-5-hello-world-step-by-step


Above links help us in creating ready made application which angular CLI provide us but now we want a component of our own.


Step 1:  

Creating a Custom Component

navigate to your folder structure where you want to create your custom component
and then run below command

ng g component customHelloWorld

like this :

D:\Rakesh_kumar_Singhania\Angular5HelloWorld\hello-world-app\src\app>

ng g component customHelloWorld

This command will create your component and also it make sure to mark an entry in your app.module.ts file.

app.module.ts -- This file holds all the source required by the project which include all the imports of the components.

below is the snapshot of generated files :

Beauty of command ng g component customHelloWorld is 

This command generated 4 for the component :

1 . HTML file of your component
2. Test file for your component
3. TS file for writing your logic.
4. CSS file for styling.


Step 2:  

Open auto generated file custom-hello-world.component.ts.

@Component({
  selector: 'app-custom-hello-world',
  templateUrl: './custom-hello-world.component.html',
  styleUrls: ['./custom-hello-world.component.css']
})
export class CustomHelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit() {   
   console.log("hello");
  }
}

and and modify custom-hello-world.component.html according to your need.

<p>
  custom-hello-world works!
</p>

Below code is important in sense of mapping your HTML file and CSS file specific to this component.

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

So whenever you use app-custom-hello-world selector in any of your HTML it will render the
HTML part of custom-hello-world.component.html.



Lets use app-custom-hello-world  selector tag in our app.component.html.

app.component.html

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

Start the server using

 ng serve 

Hit on the url http://localhost:4200


Output :