viewchild contentchild

ViewChild and ContentChild in Angular

Posted Leave a commentPosted in Learning

This article on ViewChild and ContentChild in Angular is part of the Learning Angular series. Understanding View Encapsulation Angular implements View Encapsulation by using a custom attribute to all the elements inside a particular component. This is known as Shadow DOM.Shadow DOM is a new method being applied by browsers, btu it is not fully implemented by all browsers. So Angular emulates it by its own by adding a specific attribute to each of its component, making sure that everything that has been defined by the component is only used by the component, mainly css. More on View Encapsulation The encapsulation can  … [Read More]

custom properties and events

Component Custom Properties and Events

Posted Leave a commentPosted in Learning

This article on Component Custom Properties and Events is part of the Learning Angular series. The app has been split into components and their children. Now it is needed to know how to pass the data in between them. Binding to Custom Properties Even when a property inside a class is public, the property can’t be directly accessed from outside (the components hosting it).To make sure that they are accessible, add @Input() before the variable declaration. @Input() element:ServerElement; Make sure to import Input from @angular/core.Now it an be bound like this: <app-server-element *ngFor=”let serverElement of serverElements” [element]=”serverElement”></app-server-element> Assigning an Alias to Custom  … [Read More]

styling in angular

Styling in Angular – ngStyle, ngClass

Posted Leave a commentPosted in Learning

This article on Styling in Angular is part of the Learning Angular series. Styling elements Dynamically with ngStyle <p [ngStyle]=”{backgroundColor: getColor()}”> The ngStyle is a directive and has been implemented with the square brackets to make sure that it is bound to the property ngStyle ** More information required Applying CSS classes Dynamically with ngClass <p [ngClass]=”{online: serverStatus === ‘online’}”> In case of ngClass, it will take a list of key-value pairs, where:key = the class to addvalue = the condition

Angular Directives

Posted Leave a commentPosted in Learning

This article on Angular Directives is part of the Learning Angular series. Understanding Angular Directives Directives are instructions in the DOMReceives a Green Background @Directive({ selector: ‘[appTurnGreen]’ }) export class TurnGreenDirective { … } Using ngIf to output data conditionally Usage:Created Server {{ serverName }}TODOAnything can be passed to the *ngIf directive that can return a Boolean. Based on true/false, the element is either added/removed from the DOM. Enhanced ngIf with the Else condition <p *ngIf=”serverCreated else noServer”>Created Server {{ serverName }}</p> <ng-template #noServer> <p>No Server Created</p> </ng-template> Using the #noServer marks a template for using somewhere else. — Attribute Directives vs  … [Read More]

data binding

Data Binding (String Interpolation, property binding, events)

Posted Leave a commentPosted in Learning

This article on Data Binding is part of the Learning Angular series. DataBinding is required for communications between the client and the server.To output data, one can use:1. String Interpolation – {{ data }}2. Property Binding – [property]=”data”To react to user interactions1. Event Binding – (event)=”expression” While the above ways are 1-way binding, angualr can be used for 2-way binding by combining the above:[(ngModel)]=”data” String Interpolation The string interpolation can be done by wrapping the expression between double curly braces – {{ expression }} The expression can be anything which will return a string, or can be converted to a string, but  … [Read More]

angular componentsa nd modules

Angular Components & Modules

Posted Leave a commentPosted in Learning

This article on Angular components is part of the Learning Angular series. Components form the building blocks of the framework and is defined using the @Component decorator. The decorator takes in the selector, template, styles and other properties which specify the metadata require to process the component. Default Angular Component – AppComponent When we create an Angular application for the first time using the ng new project-name command, the created project by default contains one component named the AppComponent (app.component.ts) file. If we look closely, one can see the following files in the src/app folder All the 4 files pertain to the  … [Read More]

Introduction to Angular and how it starts up

Posted Leave a commentPosted in Angular, Learning, Technology

This article on introduction to angular is part of the Learning Angular series. Angular replaces AngularJS which had taken the internet by storm, when it was released almost a decade back in 2009. While AngularJS was quite a robust library, there were also quite some nuances which was making it difficult to manage. So the developers went for a whole rewrite of the library and built a framework instead which came to be known as Angular 2, or better Angular. Over the years, the team has been releasing newer versions every 6 months, v8 being the most recent. We won’t  … [Read More]

learning angular

Learning Angular – A Complete Guide

Posted Leave a commentPosted in Learning

Learning Angular would be a multi-part series on the basics of Angular. After trying to explain the basics of Angular to people who are getting started with front-end development, I thought to pen down some of the things that should be easier to follow afterwards. We can broadly divide the course into the following topics: Introduction to Angular and how it starts up Understanding Components and Modules Data binding (String interpolation, property binding, events) Angular Directives Styling in Angular – ngStyle, ngClass Component Custom Properties and Events ViewChild and ContentChild in Angular Component Lifecycle in Angular Services (Dependency Injection) Angular  … [Read More]

free ssl, let's encrypt, shared hosting

Install free SSL from Lets Encrypt on Namecheap shared hosting

Posted Leave a commentPosted in Technology

Google has made SSL a requirement for all websites, which makes it a great time to have SSL on all the websites. Here we will see how we can install free SSL from Let’s Encrypt on Namecheap shared hosting. Generating the free SSL certificate Go to SSL for free website. It first prompts to enter the website url. Once we fill your domain name, it should add both the url’s with the www and non-www domain. First it is required to verify the ownership of the domain which can be done in 3 ways:1. Automatic FTP verification2. Manual verification which  … [Read More]

page title angular

Managing Page Title in Angular

Posted Leave a commentPosted in Angular, Technology

Managing page title in Angular is quite straightforward by using the Title service provided by Angular. It’s as simple as calling the setTitle function with the new title. Following is an code excerpt from Angular docs public constructor(private titleService: Title ) { } public setTitle( newTitle: string) { this.titleService.setTitle( newTitle ); } This is fine for setting the page title from a single page, but it can be redundant to add this to every component from where you want to change the title. To make it easier, we can use the router events and have a centralized place to make  … [Read More]