Template-driven Forms Use a Component’s Template Unit Test Against DOM Reactive Forms Use a Component’s Template Create a Form Model in Typescript (this must by in sync with the template) Unit Test Against Form Model Validation in Form Model
Category: Angular
Angular is a platform for building mobile and desktop web applications. Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.
Angular CLI Generate Code
class – ng g cl component – ng g c directive – ng g d enum – ng g e guard – ng g g interface – ng g i module – ng g m pipe – ng g p service – ng g s
Angular CLI Commands
ng help – Displasy commands and flags ng new – Creates new Angular application ng serve – Launches a server ng generate – Generates file from blueprint ng test – Runs unit tests usning Karma ng e2e – Runs end to end tests using Protractor ng build – Compiles into an output directory
Angular CLI overview
Angular CLI overview A command line interface for Angular Purpose: Build an Angular application Generate Angular files Execute the application Run unit and end to end tests Prepare the application for deployment
Day 6 – Style Binding
# <h3 [style.color]=”‘orange’”>Style Binding</h3> # public hasError = false; <h3 [style.color]=”hasError ? ‘red’ : ‘green’”>Style Binding with ternary condition</h3> # public highlightColor = “orange”; <h3 [style.color]=”highlightColor”>Style Binding 2</h3> public titleStyle = { color: “blue”, fontStyle: “italic” } <h3 [ngStyle]=”titleStyle”>Style Binding 3</h3>
Day 5 – Class Binding
# Class attribute binding <h3 class=”text-success”>Class Attribute</h3> This is hard coded for binding. # Class binding with property Component: public successClass = “text-success”; <h3 [class]=”successClass”>Class Binding</h3> # Class binding with multiple class Component: classesApply: string = ‘classBold classItalic’; <h3 [class]=”classesApply”>Multiple classes apply</h3> # property binding with class Component: public hasError = true; <h3 [class.text-danger]=”hasError”>Class Binding</h3>…Continue reading Day 5 – Class Binding
Day 4 – Property Binding
Attribute vs property Example: <input type=”text” value=”Biswas”> Attribute and property not the same Attribute defined by HTML Properties – Defined by DOM (Document Object Model) Attributes initialized by DOM properties and they are done. Attributes value cannot change once they are initialized. Property values however can change. HTML attribute value specifice the initialize value. And…Continue reading Day 4 – Property Binding
Day 3 – Interpolation
Interpolation: Interpolation is a way angular use to display variables inside your HTML using the curly braces. You can display variables, named. Name <b>name<b> using {{name}} You can bind the data from the class to the template Bind data using double curly bracket {{property_name}} → there is class property name here. Then showing dynamic value. …Continue reading Day 3 – Interpolation
Day 2 – Component Basic
Component Have: Template – represents the view (using HTML) Class – Code, Typescript, Business Logic, Data & Method (control the logic & view) MetaData: Information (Angular needs to decide for particular class angular component) Decorator: Decorator Metadata feature in Typescript. Decorator just a function provide information about the class attached to it. Component use component…Continue reading Day 2 – Component Basic
Day 1 – Basic Functioning
# what and why ? Framework to build client side application Great for SPAs # Why Modular approach Re-usable code Development quicker and easier (like validation, routing) Unit testable and easily maintainable code Google + Microsoft product (Angular + Typescript) # Angular’s History 2010 – AngularJS 2016 – Angular version 2. Just called Angular 2016…Continue reading Day 1 – Basic Functioning