Getting started with Angular

Angular is a front end framework & able to build cross-platform applications. It is used to Single Page Applications (SPA)

Prerequisites - HTML, CSS, JavaScript

Things required for Angular to set up in your local environment.

  • Node.js
  • NPM (Node Package Manager)

Steps for setting up Angular

Install Angular CLI - This is used to create projects, generate applications, testing, deployment, etc.

Open your terminal and run the following command

npm install -g @angular/cli

Here, -g stands for "global".

After installation, if you want to check whether the installation is completed or to check which version are you using run the following command in your terminal

ng --version

After running the command, you can find the output below

Now, Create a workspace and projects can be developed in this workspace

Run the following command in your terminal and provide the name of your project with -- <angular-project>

ng new angular-project

Click enter after the command & you can find the next step with below picture

Select "Yes" for angular routing and Select "CSS" as stylesheet format (NOTE - You can use any other style as per user choice)

After completing the installation of all packages, navigate to the project folder and run the following command in your terminal

cd angular-project

ng serve --open

 you can the following in your terminal after running the server

Navigate to *** http://localhost:4200/ *** in your browser to check your angular project

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Creating a Word Generator Application with Angular

Create a project folder with name  <word-generator> in your terminal

ng new word-generator

Navigate to the project folder and install bootstrap through the terminal and run the server to check if the installation of packages is correct.

cd word-generator

npm install bootstrap

ng serve

Open your browser and navigate to *** http://localhost:4200/ ***, After verifying your project close your server.

Now, manually create a folder with name - "utils" in the following directory - "word-generator/src/<utils>"  and create files with an extension of ".ts". I created two files with names - "words.ts" and "countries.ts". Please find the attached screenshot below for reference.

The countries.ts file will be as follows

export default [
    'India',
    'Afganisthan',
    'Pakisthan',
    'China',
    'Sri Lanka',
    'Bangladesh',
    'Canada',
    'Denmark',
    'Democratic Republic of the Congo',
    'Hungary'
]

The words.ts file will be as follows

export default [
  'busy',
  'composition',
  'saddle',
  'track',
  'close',
  'aside',
  'public',
  'break',
  'taken',
  'bush'
];

Now, refer to the screenshot attached for the project folder structure

The styles.css will be as follows

@import "~bootstrap/dist/css/bootstrap.min.css";

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  position: relative;
  width: 100%;
  background-image: url(./assets/bgc.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
}

Assets is the folder where all the media files like images, videos, etc can be stored.

Now we will be writing the business logic in app.component.ts file and the code will be as follows

import { Component } from '@angular/core';
import arrayWords from "../utils/words";
import arrayCountries from "../utils/countries"

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'word-generator';

  words = '';
  countries = ''
  limit = 0;

  handleSlideChange(newLimit: number){
    this.limit = newLimit;
  }

  generateWords(){
    this.words = arrayWords.slice(0, this.limit).join(" ")
  }

  generateCountries(){
    this.countries = arrayCountries.slice(0, this.limit).join(" ")
  }
}

Go to app.component.css and it will be as follows

.slider {
  appearance: none;
  height: 15px;
  border-radius: 5%;
  background: #919090;

  outline: none;
  margin: 15px;
}
.slider::-webkit-slider-thumb {
  appearance: none;
  height: 35px;
  width: 35px;
  background-color: cyan;
  border-radius: 50%;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  appearance: none;
  height: 35px;
  width: 35px;
  background-color: cyan;
  border-radius: 50%;
  cursor: pointer;
}
button {
  border-radius: 5px;
  padding: 10px 35px;
  margin: 25px 0;
}

Now, open app.component.html and the file will be as follows

<div class="container w-50 mt-5 text-center">
  <div class="text-center display-3 m-3 text-white">
    Word Limit : {{limit}}
  </div>

  <input type="range" 
  min="1" 
  max="10" 
  value="{{limit}}" 
  class="slider form-control-range"
  (change)="handleSlideChange($event.target.value)"
  />

  <button class="btn btn-info" (click)="generateWords()">Generate Words</button>
  <br>
  <button class="btn btn-info" (click)="generateCountries()">Generate Countries</button>

  <div *ngIf="words" class="card card-body">
    <p class="display-4">
      {{words}}
    </p>
  </div>
  <br>
  <div *ngIf="countries" class="card card-body">
    <p class="display-4">
      {{countries}}
    </p>
  </div>
</div>

Finally, app.module.ts will be as follows

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

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

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

As of now, all the code part is done and application is ready to run on the local server.

ng serve

Run the following command in your project terminal to test the application. Please check the following screenshots attached for reference. After running the server you can find like

Slide the ball to change the word limit as per user choice and Click on "Generate Words" or "Generate Countries" buttons to view the expected results.

For more details on angular and its libraries, please refer to the documentation and spend some time reading the documentation to get things clear on angular.

blog comments powered by Disqus