Creating Angular App

In this article, you will learn how to create your first Angular App.

 Agenda
 
Given below is the list of content that we are going to cover in this blog.
  1. Generating our own component using ng generate component ‘name’ in Angular CLI.
  2. Generating a service and using it to manipulate the data.
  3. Including bootstrap in our Angular app
Let’s get started.
 
Angular uses TypeScript as its default scripting language.
 
First, using the npm, let us generate a component named ‘customer-forms’. If you don’t know what npm is or how to work with npm, I recommend you click here.
 
It will generate 4 files.
 

 
One is page-specific ‘customer-forms.component.css’ file; the second one is ‘customer-forms.component.html’; next is ‘customer-forms.component.spec.ts’ which is a test file to test your code; the last one is ‘customer-forms.component.ts’ which is a TypeScript file.
 
Add this component to your ‘app.module.ts’ file.
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { CommonModule } from '@angular/common';  
  3. import { NgModule } from '@angular/core';  
  4. import { FormsModule, ReactiveFormsModule} from '@angular/forms'  
  5. import { AppRoutingModule } from './app-routing.module';  
  6. import { AppComponent } from './app.component';  
  7. import { CustomerFormsComponent } from './customer-forms/customer-forms.component';  
  8. import { CustomerViewComponent } from './customer-view/customer-view.component';  
  9. @NgModule({  
  10.   imports: [  
  11.     BrowserModule,  
  12.     CommonModule,  
  13.     AppRoutingModule,  
  14.     FormsModule,  
  15.     ReactiveFormsModule  
  16.   ],  
  17.   declarations: [  
  18.     // AppComponent,  
  19.     CustomerFormsComponent,  
  20.     CustomerViewComponent  
  21.   ],  
  22.   bootstrap: [  
  23.     // AppComponent,  
  24.     CustomerFormsComponent,   
  25.     CustomerViewComponent    
  26. ]  
  27. })  
  28.   
  29. export class AppModule { }  
Now, let’s create a service.ts file for future use.
 
Type ng generate service ‘name’.
  1. export class CustomerFormsService{  
  2.     softwareData = [  
  3.         {Label:'None',Option:[{softwareId:0,SoftwareName:'None'}]},  
  4.         {Label:'ECommerce',Option:[  
  5.   
  6.             {softwareId:1,SoftwareName:'Flipkart'},  
  7.             {softwareId:2,SoftwareName:'Amazon'}]  
  8.         },  
  9.         {Label:'Asset Manager',Option:[  
  10.             {softwareId:3,SoftwareName:'Asset Management'},  
  11.             {softwareId:4,SoftwareName:'Barcode Printer'},  
  12.             {softwareId:5,SoftwareName:'Asset Locator'}]  
  13.         },  
  14.         {Label:'School Management',Option:[  
  15.             {softwareId:6,SoftwareName:'Attendance Management'},  
  16.             {softwareId:7,SoftwareName:'Exam Management'},  
  17.             {softwareId:8,SoftwareName:'Faculty Management'},  
  18.             {softwareId:9,SoftwareName:'Schooling'}]  
  19.         },     
  20.         {Label:'Business',Option:[  
  21.            {softwareId:10,SoftwareName:'Warehouse'},  
  22.             {softwareId:11,SoftwareName:'Billing'},  
  23.             {softwareId:12,SoftwareName:'GST filing'}]  
  24.         }  
  25.     ];  
  26.   
  27.     customerRequests = [  
  28.         {  
  29.         id: 1,  
  30.        CompanyName: 'Rohan IT',  
  31.         Name: 'Rohan Sharma',  
  32.         SoftwareId: 5,  
  33.         RelationshipDuration: 10  
  34.     },  
  35.     {  
  36.         id: 2,  
  37.         CompanyName: 'Infogain IT',  
  38.         Name: 'Lokesh Sharma',  
  39.         SoftwareId: 0,  
  40.         RelationshipDuration: 0  
  41.     },  
  42.     {  
  43.         id: 3,  
  44.         CompanyName: 'Infozech',  
  45.         Name: 'Rahul Kumar',  
  46.         SoftwareId: 9,  
  47.         RelationshipDuration: 11  
  48.     }];  
  49.     getAllSoftware()    {  
  50.         return this.softwareData;  
  51.     }  
  52.   
  53.     get()    {  
  54.         return this.customerRequests;  
  55.     }  
  56.   
  57.     getOne(id: number)    {  
  58.         return this.customerRequests.find( x=> x.id == id );  
  59.     }  
  60.   
  61.     add(customerRequest)    {  
  62.         console.log('In for add');  
  63.         this.customerRequests.push(customerRequest)  
  64.         console.log('Added sucessfully');  
  65.         console.log(this.customerRequests);  
  66.     }  
  67.   
  68.     delete(customerRequest)    {  
  69.         const index = this.customerRequests.indexOf(customerRequest);  
  70.         if(index == 0)  
  71.         {  
  72.             this.customerRequests.splice(index,1);  
  73.         }  
  74.     }  
  75. }  
I have created ‘customer-forms.service.ts’ with data and some useful methods. We need to add this service to our ‘app.module.ts’ file as well. For that, we shall add Providers properties in @NgModule directive and pass the service name there.
  1. import { CustomerFormsComponent } from './customer-forms/customer-forms.component';  
  2. import { CustomerFormsService } from '../Services/customer-forms.service';  
  3. import { CustomerViewComponent } from './customer-view/customer-view.component';  
  4. @NgModule({  
  5.   imports: [  
  6.     BrowserModule,  
  7.     CommonModule,  
  8.     AppRoutingModule,  
  9.     FormsModule,  
  10.     ReactiveFormsModule  
  11.   ],  
  12.   declarations: [  
  13.     // AppComponent,  
  14.     CustomerFormsComponent,  
  15.     CustomerViewComponent  
  16.   ],  
  17.   providers: [  
  18.     CustomerFormsService  
  19.   ],  
  20.   bootstrap: [  
  21.     // AppComponent,  
  22.     CustomerFormsComponent,  
  23.     CustomerViewComponent  
  24.   ]  
  25. })  
  26. export class AppModule { }  
By doing this, we let Angular know that this file will be injected in other classes or components.
 
Now, let us make our component.
  1. import { Component, OnInit } from '@angular/core';  
  2. import { FormGroup, FormControl, Validators } from '@angular/forms';  
  3. import { Validations } from '../Validations';  
  4. import { CustomerFormsService } from '../../Services/customer-forms.service';  
  5. import { CustomerViewComponent } from '../customer-view/customer-view.component';  
  6. @Component({  
  7.   selector: 'app-customer-forms',  
  8.   templateUrl: './customer-forms.component.html',  
  9.   styleUrls: ['./customer-forms.component.css']  
  10. })  
  11. export class CustomerFormsComponent implements OnInit {  
  12.   form: FormGroup;  
  13.   customerRequests;  
  14.   SoftwareData;  
  15.   constructor(private customerRequestService : CustomerFormsService) {  
  16.   }  
  17.   
  18.   ngOnInit() {  
  19.     this.form = new FormGroup({  
  20.       CompanyName: new FormControl('', Validators.required),  
  21.       Name: new FormControl('', Validators.required),  
  22.       SoftwareId: new FormControl(''),  
  23.       RelationshipDuration: new FormControl('', Validators.compose([  
  24.         Validators.required  
  25.       ])),  
  26.     });  
  27.     this.SoftwareData = this.customerRequestService.getAllSoftware();  
  28.   }  
  29.   OnSubmit(CustomerRequest){  
  30.     console.log(CustomerRequest);  
  31.     this.customerRequestService.add(CustomerRequest);  
  32.     console.log('Added successfully');  
  33.   }  
  34.   
  35.   SelectId(id)  
  36.   {  
  37.     this.form.value["SoftwareId"] = id.target.selectedOptions[0].value;  
  38.     console.log(this.form.value["SoftwareId"]);  
  39.     console.log(this.SoftwareData);  
  40.   }  
  41. }  
Here, passing values in constructor is a dependency injection ‘privatecustomerRequestService : CustomerFormsService’.
 
Angular is built upon a very powerful dependency injection framework i.e. ‘you can pass the dependency to the class itself’. Here the ‘customer-forms.component.ts’ needs the ‘customer-forms.service.ts’ which was injected to the component through the constructor.
 
Use the command npm install bootstrap to install the bootstrap in your project and add bootstrap to the angular.json file.
  1. "styles": [  
  2.               "node_modules/bootstrap/dist/css/bootstrap.min.css",  
  3.               "src/styles.css"  
  4.             ]  
In the ‘customer-forms.component.html’ file, write your HTML code.
  1. <header role="banner">  
  2.     <h1>Customer Request</h1>  
  3.     <nav role="navigation">  
  4.         <h2>Site navigation</h2>  
  5.     </nav>  
  6. </header>  
  7. <main role="main" class="container">  
  8. <section>  
  9.     <h3>Request</h3>  
  10.     <p>Existing customer should register their request like need of new deature in a software,  
  11.         fix to a bug in s/w, need special permission in a s/w or want a new s/w from scratch.  
  12.         We'll get in touch within 2 hours</p>  
  13. </section>  
  14. <section class="row">  
  15.     <form  
  16.     [formGroup]="form"  
  17.     (ngSubmit)="OnSubmit(form.value)" class="col-md-12">  
  18.     <p class="row">  
  19.         <label for="CompanyName" class="col-md-3 lable">Company Name</label>  
  20.         <input type="text" id="CompanyName" name="CompanyName" formControlName="CompanyName"  
  21.         class="col-md-8 form-control"/>  
  22.     </p>  
  23.     <p class="row">  
  24.         <label for="Name" class="col-md-3">Name</label>  
  25.         <input type="text" id="Name" name="Name" formControlName="Name"  class="col-md-8"/>  
  26.     </p>  
  27.     <p class="row">  
  28.         <label for="Softwares" class="col-md-3">Software Purchased</label>   
  29.         <select id="Softwares" name="Softwares" formControlName="SoftwareId" class="col-md-4"  
  30.         (change)="SelectId($event)">  
  31.             <optgroup *ngFor="let softwareGroup of SoftwareData" label="{{softwareGroup.Label}}">  
  32.                 <option *ngFor="let softwareOption of softwareGroup.Option"  
  33.                 [value]="softwareOption.softwareId">{{softwareOption.SoftwareName}}</option>  
  34.             </optgroup>  
  35.         </select>  
  36.     </p>  
  37.     <p class="row">  
  38.         <label for="RelationshipDuration" class="col-md-3"> Relationship with us</label>  
  39.         <input type="text " id="RelationshipDuration" maxlength="3" Min="18"  
  40.         name="RelationshipDuration" formControlName="RelationshipDuration" class="col-md-2"/>          
  41.         <span *ngIf="form.get('RelationshipDuration').hasError('required')" class="error col-md-6">  
  42.             Age must be  greater than 18 and cannot be blank!  
  43.         </span>  
  44.     </p>  
  45.     <p class="row">  
  46.         <input type="submit" value="Save" [disabled]="!form.valid" class="col-md-2 btn btn-success"/>  
  47.     </p>  
  48.     </form>  
  49. </section>  
  50. </main>  
  51. <footer></footer>  
Now, when you click on the "Save" button, you should see a console window in your browser. See if the object is logged or not.