Enter into Exotic Angular World - JS Frameworks got candid

Angular

Let’s get practical by creating a simple todo app first.

Installations:

Install Visual Studio Code as code editor

Install nodejs and NPM

Install Angular CLI

npm install -g @angular/cli

ng new todo-apps

Visual studio folder has the following contents now:

To run the app, call :

Ng serve –open

The --open (or just -o) option automatically opens your browser to http://localhost:4200/.

 

Reference taken from https://angular.io/guide/setup-local

Here is the goal what we want to achieve:

Create a new component todolist:

ng generate component todolist

Todolist component needs  a list of todo tasks. Hence lets create a model for the list:

Create a file “model.ts” in a folder modals inside App folder

export class Model

{

    user:string;

    items:any;

    constructor() {

    this.user = "Adam";

    this.items = [new TodoItem("Buy Flowers", false),new TodoItem("Get Shoes", false),

                new TodoItem("Collect Tickets", true),

                new TodoItem("Call Joe", false)]

     }

}

 

export class TodoItem

{

     action;

     done;

     constructor(action: string, done: boolean)

     {

        this.action = action;

        this.done = done;

     }

}

 

TODO List is comprised of a set a TODOItems.

So, each ToDoItem has two properties action and done (Boolean).

Now time to design Template (HTML side of it). Copy the following code into todolist.component.html

<h3 class="bg-primary p-a-1">{{getUserName()}}'s To Do List</h3>

<div class="m-t-1 m-b-1">

    <input class="form-control" #todoText />

    <button class="btn btn-primary m-t-1" (click)="addItem(todoText.value)">

    Add

    </button>

</div>

 

<table class="table table-striped table-bordered">

 <thead>

 <tr><th></th><th>Description</th><th>Done</th></tr>

 </thead>

 <tbody>

 <tr *ngFor="let item of getTodoItems(); let i = index">

 <td>{{ i + 1 }}</td>

 <td>{{ item.action }}</td>

 <td><input type="checkbox" [(ngModel)]="item.done" /></td>

 <td [ngSwitch]="item.done">

 <span *ngSwitchCase="true">Yes</span>

 <span *ngSwitchDefault>No</span>

 </td>

 </tr>

 </tbody>

</table>

 

 

Now, need to add the following code in TS file to support the class methods called in above HTML file.

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

import { Model, TodoItem } from '../modals/model';

 

@Component({

  selector: 'app-todolist',

  templateUrl: './todolist.component.html',

  styleUrls: ['./todolist.component.scss']

})

export class TodolistComponent implements OnInit {

 

  model = new Model();

 

  constructor() { }

 

  ngOnInit(): void {

  }

 

  getTodoItems(){

    return this.model.items.filter(item => !item.done);

  }

  getUserName(){

    return this.model.user;

  }

 

  addItem(newItem:string) {

      this.model.items.push(new TodoItem(newItem, false));

  }

 

}