Angular 4 : Creating Component Automatically In AngularJS

After gaining the knowledge about how components are created in angular.js manually, this blog will help you learn how to create components automatically.

If you are unfamiliar with the manual component creation, visit the blog – Creating Registration Form With Custom Component In AngularJS for detailed information.

Follow these basic steps in order to create components automatically –

1. In the terminal tab of Visual Studio Code editor write the following code line for starting up the local server

ng serve

2. Again, in the terminal tab make sure you are in the myapp directory (notice the path on the command line). Now write the following code line –

ng g c mylogin

This code line means – generate an angular component named as mylogin.

3. After striking the ENTER key you would notice that the component – mylogin has been created and available in the left sidebar explorer with all the necessary file (its corresponding HTML, CSS and TS file).

4. Open up the generated HTML file i.e. mylogin.component.html file and write down and save the following code –

<h1>
My Login Page
</h1>

5. Open up mylogin.component.ts file –

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mylogin',
templateUrl: './mylogin.component.html',
styleUrls: ['./mylogin.component.css']
})
export class MyloginComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

Notice the automatic creation of component mylogin. Along with all these, you will also notice that selector has been created, HTML & CSS files have been connected to templateUrl and styleUrls respectively.

6. Now, open up the pre-generated file – app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ngModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { RegistrationComponent } from './registration.registration.component';
import { MyloginComponent} from './mylogin/mylogin.component';
@ngModule({
declarations: [
AppComponent,
RegistrationComponent,
MyloginComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Notice the automatic addition of mylogin component in the declaration section and also in the code line which imports its core libraries.

7. Ultimately to make our web page work, we have to call <h1> (mentioned in mylogin.component.html file – step 4).
In order to do so, we have to mention our selector – app-mylogin (available in mylogin.component.ts file) in app.component.html file as

<div style="text-align : center">
<h1>
Welcome to Angular {{title}}!!
</h1>
</div>
<app-registration></app-registration>
<app-mylogin></app-mylogin>

8. On the localhost, you will notice the heading – My Login Page.

Conclusion

Instead of writing multiple code line and applying manual efforts, we have created a component automatically. The syntax of code line required to create an automatic component is –

ng g c *component_name*

If you wish to brush up your knowledge with previous angular.js tutorials then visit –

• Creating Registration Form With Custom Component In AngularJS.
• Creating First App In AngularJS With Basic File Setup & Configuration.