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 – 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 […]