VS Code Extension To Scaffold Angular 7 Components

I usually used Angular as my front end framework in web development and in my experienced I have to do some repetitive task in creating components, services, directives and other angular files, because of that I looked for a plugin to help me generate those files and I found Angular Files a VS Code extension.

I will show you how to use Angular Files to generate components. I will be using the latest version of Angular for this tutorial.

Advertisements

To start you should have node.js installed in your machine. If you don’t have it, you can download it from https://nodejs.org/en/.

You should also need a VS Code installed in your machine and you can download it from https://code.visualstudio.com/.

Now that you have the necessary software installed in your machine. We can now start coding.

First create a folder in you machine. Then open node.js command propmt and navigate to your folder using the cd command.

We will use Angular CLI to build our project. To installed Angular CLI enter this command.

npm install -g @angular/cli

Then to create a new app named employee-list-app using this command. The CLI will ask you to include Angular Route. Select Yes to include Angular Route though we will not going to use it in this tutorial. Then select CSS for styling.

ng new employee-list-app

Navigate to the directory of our new app using the command

cd employee-list-app

Then open it in VS Code using the command

code .
Advertisements

In VS Code click the Extensions icon. Then Search for Angular Files.

Now that you have the Angular Files installed in you VS Code. Go back to File Explorer then in expand src folder. Right click to app folder and you should be able to see the Generate Component. Click Generate Component. Then it will ask you for a name. Type employees for the name.

Now you will see that it generated files inside the employees folder.

It also added the new component in app.module.ts file.

Advertisements

Let’s use our new component. Add HttpClientModule in the imports in app.module.ts.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeesComponent } from './employees/employees.component';

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

We don’t have any backend, so will just use a dummy api http://dummy.restapiexample.com/api/v1/employees for our get request. Update you employees.compnent.ts to look like the code below.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

  employees: any;
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getEmployees();
  }

  getEmployees() {
    this.http.get('http://dummy.restapiexample.com/api/v1/employees')
    .subscribe(response => {
      this.employees = response;
    }, error => {
      console.log(error);
    });
  }

}

Then your employees.component.html to this.

<div class="card" *ngFor="let employee of employees">
  <div class="container">
    <p>Employee: <b>{{employee.employee_name}}</b></p>
    <p>Employee Id: <b>{{employee.id}}</b></p>   
  </div>
</div>

Let’s add some styling. Changing your employees.component.css to this

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: 15px;
    width: 400px;
    float: left;
  }
  
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  .container {
    padding: 2px 16px;
  }

Then use our new component in app.component.html. Update your app.component.html to look like the code below.

<app-employees></app-employees>
<router-outlet></router-outlet>

Then go back to nodejs command prompt and execute this command to serve our angular app.

ng serve

Now we are done. Open your web browser and navigate to http://localhost:4200/ you should have this output.

Advertisements

Here is the list of other VS Code extension that I used for Angular.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s