Tag: angular

Introduction to Angular and how it starts up

Posted Murari NayakLeave 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 Murari NayakLeave 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) if-else, for, switch ngStyle, ngClass Component custom properties and custom events ViewChild, ContentChild Component Lifecycle Directives (including HostBinding, HostListener) Services (Dependency Injection) Routing (QueryParams, Fragments, Pass  … [Read More]

page title angular

Managing Page Title in Angular

Posted Murari NayakLeave 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]

angular typescript pipe

Using Pipes in TypeScript (Angular)

Posted Murari NayakLeave a commentPosted in Angular, Technology

While it’s quite easy to use a pipe in Angular HTML code. In the following case, we are using a translate pipe. <h2>{{ ‘Hello’ | translate }}</h2> But using the same in TypeScript comes with some additional code setup.The setup can be divided into two distinct ways.1. Pipe without any DependencyThis method is the simplest one. We can just create an instance of the Pipe, and call it’s transform property with the text to transform as parameter. @Pipe({ name: ‘custompipe’, pure: false }) export class MyCustomPipe implements PipeTransform { constructor() {} transform(key: string) { return keyTransformed; } } ————————————- @Component({  … [Read More]

angular params queryparams fragment

Working with Params, QueryParams and Fragments in Angular

Posted Murari NayakLeave a commentPosted in Angular

This post has been moved as a 3 part post with each part focussing on one item. While working with routes in angular, sometimes we might need to fetch some information from the url that shows up in the browser. Params, QueryParams and Fragments are the bits of information that can be fetched from the route url. 1. Working with Params in Angular 2. Working with QueryParams in Angular 3. Working with Fragments in Angular

angular params

Working with Params in Angular

Posted Murari NayakLeave a commentPosted in Angular

While working with routes in angular, sometimes we might need to fetch some information from the url that shows up in the browser. Params, QueryParams and Fragments are the bits of information that can be fetched from the route url. This is one part of the 3 part series of the subject – Working with Params, QueryParams and Fragments in Angular In this part, we are going to work with Route Params in Angular.   Params Params form the dynamic part that is available as a part of the url itself. Lets consider some dynamic route that we create in  … [Read More]

angular

AngularSutra

Posted Murari NayakLeave a commentPosted in Angular, Technology

SECTION 1 9 – What is TypeScript Its a super-set of vanilla JavaScript. It has more features like Types, Classes, Interfaces, etc. But as because the browser does not support Typescript, it is first compiled to JavaScript via the CLI prior running in the browser. 11 – Adding Bootstrap to Angular project While this can be added directly to the index file, it is better to do it the angular way. While in the project folder, type “npm install –save bootstrap” in the command line and press enter. This will install the bootstrap into the current project setup and save  … [Read More]