Learn how to create your first Angular app in 20 minutes

Photo by Kelly Sikkema on Unsplash

Table of contents

  • Adding an item (learn how to submit a form in Angular )
  • Removing an item (learn how to add an event in Angular)
  • Angular animation (learn how animate the components )

Prerequisites:

  • Node.js
  • npm
node -v
npm -v
npm install -g @angular/cli
  • Basic knowledge of JavaScript
  • HTML and CSS fundamentals

Creating our first app

We will use angular-cli to create and generate our components. It will generate services, router, components, and directives.

ng new my-app
ng new todo-app
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
ng serve
<div class="container">
<form>
<div class="form-group">
<h1 class="text-center text-primary">Todo App</h1>
<div class="input-group-prepend">
<input type="text" class="form-control" placeholder="Add Todo" name="todo">
<span class="input-group-text">Add</span>
</div>
</div>
</form>
</div>
body{
padding: 0;
margin: 0;
}
form{
max-width: 25em;
margin: 1em auto;
}
<input type="text" #todo class="form-control" placeholder="Add Todo" name="todo" ngModel>
<input #myVariable type="text" name="text" ngModel>// get the value of the Variable
<p>{{myVariable.value}}</p>
<p>{{todo.value}}</p>
export class AppComponent {
todoArray=[]

}
<span class="input-group-text" (click)="addTodo(todo.value)">Add</span>
export class AppComponent {
todoArray=[]
addTodo(value){
this.todoArray.push(value)
console.log(this.todoArray)
}

}

Fetch data from “todoArray”

Now we have to fetch data stored in “todosArray.” We will use the *ngFor directive to loop through the array and extract the data.

<div class="data">
<ul class="list-instyled">
<li *ngFor="let todo of todoArray">{{todo}}</li>
</ul>
</div>

Styling the app

I like to use Google-fonts and Material-icons, which are free to use.

/*Google fonts*/
@import url('https://fonts.googleapis.com/css?family=Raleway');
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons>iconName</i>
// put add icon inside "input-group-text" div<span class="input-group-text" (click)="addTodo(todo.value)">
<i class="material-icons">add</i>
</span>
// and delete icon inside list item

<li *ngFor="let todo of todoArray">{{todo}}
<i class="material-icons">delete</i>
</li>
/*Google fonts*/
@import url('https://fonts.googleapis.com/css?family=Raleway');
body{
padding: 0;
margin: 0;
}
form{
max-width: 30em;
margin: 4em auto;
position: relative;
background: #f4f4f4;
padding: 2em 3em;
}
form h1{
font-family: "Raleway";
color:#F97300;
}
form input[type=text]::placeholder{
font-family: "Raleway";
color:#666;
}
form .data{
margin-top: 1em;
}
form .data li{
background: #fff;
border-left: 4px solid #F97300;
padding: 1em;
margin: 1em auto;
color: #666;
font-family: "Raleway";
}
form .data li i{
float: right;
color: #888;
cursor: pointer;
}
form .input-group-text{
background: #F97300;
border-radius: 50%;
width: 5em;
height: 5em;
padding: 1em 23px;
color: #fff;
position: absolute;
right: 13px;
top: 68px;
cursor: pointer;
}
form .input-group-text i{
font-size: 2em;
}
form .form-control{
height: 3em;
font-family: "Raleway";
}
form .form-control:focus{
box-shadow: 0;
}
<li *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>
/*delete item*/
deleteItem(){
console.log("delete item")
}
/*delete item*/
deleteItem(todo){
for(let i=0 ;i<= this.todoArray.length ;i++){
if(todo== this.todoArray[i]){
this.todoArray.splice(i,1)
}
}
}

Entering to add items

We can add a submit event to the form:

(ngSubmit)="TodoSubmit()"
<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value)"></form>
// submit Form
todoSubmit(value:any){
console.log(value)
}
// submit Form
todoSubmit(value:any){
if(value!==""){
this.todoArray.push(value.todo)
//this.todoForm.reset()
}else{
alert('Field required **')
}

}
<form #todoForm= "ngForm" (ngSubmit)="todoSubmit(todoForm.value); todoForm.resetForm()" ></form>

Adding animations

I like to add a little touch of animations. To add animation, import the animations components in your app.component.ts:

import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations:[
trigger("moveInLeft",[
transition("void=> *",[style({transform:"translateX(300px)"}),
animate(200,keyframes([
style({transform:"translateX(300px)"}),
style({transform:"translateX(0)"})

]))]),
transition("*=>void",[style({transform:"translateX(0px)"}),
animate(100,keyframes([
style({transform:"translateX(0px)"}),
style({transform:"translateX(300px)"})

]))])

])
]
})

All the code

app.component.ts

import { Component,trigger,animate,style,transition,keyframes } from '@angular/core';@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations:[
trigger("moveInLeft",[
transition("void=> *",[style({transform:"translateX(300px)"}),
animate(200,keyframes([
style({transform:"translateX(300px)"}),
style({transform:"translateX(0)"})

]))]),
transition("*=>void",[style({transform:"translateX(0px)"}),
animate(100,keyframes([
style({transform:"translateX(0px)"}),
style({transform:"translateX(300px)"})

]))])

])
]
})
export class AppComponent {
todoArray=[];
todo;
//todoForm: new FormGroup()
addTodo(value){
if(value!==""){
this.todoArray.push(value)
//console.log(this.todos)
}else{
alert('Field required **')
}

}
/*delete item*/
deleteItem(todo){
for(let i=0 ;i<= this.todoArray.length ;i++){
if(todo== this.todoArray[i]){
this.todoArray.splice(i,1)
}
}
}
// submit Form
todoSubmit(value:any){
if(value!==""){
this.todoArray.push(value.todo)
//this.todoForm.reset()
}else{
alert('Field required **')
}

}

}
<div class="container">
<form #todoForm= "ngForm"(submit)="todoSubmit(todoForm.value); todoForm.resetForm()" >
<div class="form-group">
<h1 class="text-center ">Todo App</h1>
<div class="input-group-prepend">
<input type="text" #todo class="form-control" placeholder="Add Todo" name="todo" ngModel>
<span class="input-group-text" (click)="addTodo(todo.value)">
<i class="material-icons">add</i></span>
</div>
</div>
<div class="data">
<ul class="list-unstyled">
<li [@moveInLeft] *ngFor="let todo of todoArray">{{todo}} <i (click)="deleteItem(todo)" class="material-icons">delete</i></li>
</ul>
</div>
</form>
</div>
/*Google fonts*/
@import url('https://fonts.googleapis.com/css?family=Raleway');
body{
padding: 0;
margin: 0;
}
form{
max-width: 30em;
margin: 4em auto;
position: relative;
background: #f4f4f4;
padding: 2em 3em;
overflow: hidden;
}
form h1{
font-family: "Raleway";
color:#F97300;
}
form input[type=text]::placeholder{
font-family: "Raleway";
color:#666;
}
form .data{
margin-top: 1em;
}
form .data li{
background: #fff;
border-left: 4px solid #F97300;
padding: 1em;
margin: 1em auto;
color: #666;
font-family: "Raleway";
}
form .data li i{
float: right;
color: #888;
cursor: pointer;
}
form .input-group-text{
background: #F97300;
border-radius: 50%;
width: 5em;
height: 5em;
padding: 1em 23px;
color: #fff;
position: absolute;
right: 13px;
top: 68px;
cursor: pointer;
}
form .input-group-text i{
font-size: 2em;
}
form .form-control{
height: 3em;
font-family: "Raleway";
}
form .form-control:focus{
box-shadow: 0;
}

See the Demo

Conclusion

Angular is easier than you think. Angular is one of the best JavaScript libraries, and it has great support and a nice community. It also has tools that make working with Angular fast and easy, like Angular-cli.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store