Template Driven Forms

Goals: Implement a form with different kinds of form elements Display validation errors Submit buttons. Create the new component called contact-form ng g c contact-form <div class=”jumbotron”> <div class=”container”> <h1 class=”display-4″>contact us!</h1> </div> </div> <div class=”container”> <form> <div class=”form-group”> <label for=”firstName”>firstName</label> <input id=”firstName” type=”text” class=”form-control”> </div> <div class=”form-group”> <label for=”comment”>Comment</label> <textarea id=”comment” cols=”30″ rows=”10″ class=”form-control”></textarea> […]

Angular – Directives

There are to types of Directives : Structural: Modify the structure of the DOM Attribute: Modify the attributes of DOM elements 1. ngIf export class AppComponent { courses = [1,2]; courses = []; } //Instinctual version <div *ngIf=”courses.length > 0″> List of courses </div> <div *ngIf=”courses.length == 0″> No courses yet </div> // Better version […]

Angular-Consuming HTTP service

Using the fake server https://jsonplaceholder.typicode.com/ First of all, in order to use http, we need to import HttpModule inside @angular/http import {HttpModule} from ‘@angular/http’; import { Component, OnInit } from ‘@angular/core’; import { Http } from ‘@angular/http’; @Component({ selector: ‘app-post’, templateUrl: ‘./post.component.html’, styleUrls: [‘./post.component.css’] }) export class PostComponent implements OnInit { constructor(http: Http) { http.get(‘https://jsonplaceholder.typicode.com/posts’).subscribe(response […]

Reusable Component

Component API If you want to make your component to be reusable, you should add input and output properties in your component. Just like the button element from HTML itself has “click” property, you can bind the click properties with some methods in your code to respond to users’ operations. In your component, you need to […]

Angular – Displaying data and handle events

1. Property Binding Property Binding is to bind the DOM elements’ properties to our components, for example import { Component } from “@angular/core”; import { courseService } from “./courses.service”; @Component({ selector: ‘courses’, template: ` <h2 textConetent = “{{ title }}”><h2> <h1 [textContent] = ‘title’></h1> ` }) export class coursesComponent{ title = ‘list of courses’; } […]

Angular Fundamentals

Angular Fundamentals 1. Installation 2. Component Create a new file under the folder src/app, name it courses.component. import { Component } from “@angular/core”; @Component({ selector: ‘courses’, template: ‘<h2>My Course</h2>’ }) export class courses{ } “Selector” indicates that how user going to use this tag in CSS “template” is the basic HTML for this component, it can […]