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]

free ssl, let's encrypt, shared hosting

Install free SSL from Lets Encrypt on Namecheap shared hosting

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

href angular

href = “#” or href = “javascript:” in Angular

Posted Murari NayakLeave a commentPosted in Technology

A lot of times it’s quite difficult to decide between what to use for href attribute while developing Angular 2+ applications. Following are 3 ways to do that: 1. href = “#” This is considered the safest way to create a link without allowing the user to redirect anywhere on the link click. But this method only works for HTML pages. In case of Angular, the page redirects to the base page. 2. href = “javascript:” Using href=”javascript:” or javascript:void(0) violates the Content Security Policy as it can expose the page for certain types of attacks including Cross Site Scripting  … [Read More]

nvm nodejs npm

How to use NVM to install NodeJS in Ubuntu 18.04

Posted Murari NayakLeave a commentPosted in How To

While direct installation can be done, it might be better to do it by using nvm to install nodejs. If there are already any nodejs or npm version installed on your system and you want to remove it, you can do so by (not mandatory) sudo apt remove nodejs sudo apt remove npm First let’s get started with installing Node Version Manager (nvm) curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash All the details of nvm can be found on it’s github page.This will download the nvm package to our local, install it and set the path of nvm in bash. The terminal  … [Read More]

ftp

FTP Access not Showing Any Files/Directory

Posted Murari NayakLeave a commentPosted in How To

Issue Sometimes there is an issue with FTP access not showing any files/directory The server was correctly set up and browsing through the directory via cPanel is possible.Created the FTP user for access.When I tried to log-in with the username/password and the server details, the log-in was successful.But not able to see any files or directories in the FTP client. Problem In most cases, the problem lies in how we created the FTP user. If you take a look at the user settings, notice the Directory that you have provided access to the user.It probably might be pointing to the  … [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]

es6 features

New Features in ES6 / ECMAScript 2015

Posted Murari NayakLeave a commentPosted in JavaScript, Technology

We are going to take a look at the new ES6 Features, mainly the important ones. 1. Default Parameters Earlier way var calculate = function(x, y) { x = x || 10; } ES6 way var calculate = function(x = 10, y) { … } 2. Template Literals Earlier version of string interpolations var name = ‘Name is ‘ + firstName + ‘ ‘ + lastName; ES6 Way (usage of back-ticks) var name = `Name is ${firstName} ${lastName}` 3. Multi-line strings Earlier way var text = ‘This is the first line \n’ + ‘This is the second line.’; ES6 way  … [Read More]

css

CSS Tips

Posted Murari NayakLeave a commentPosted in Technology

Limitations of CSS => Limitation of vertical control=> No expressions=> No column declaration The head element can contain the css declaration. CSS3 Modules => Selectors=> Box Model=> 2d/3d transitions=> Animations, etc Using custom fonts @font-face {    font-family: ‘YourFontName’; /*a name to be used later*/    src: url(‘http://domain.com/fonts/font.ttf’); /*URL to font*/} Then, trivially, to use the font on a specific element: .class-name {    font-family: ‘YourFontName’;} Flexbox It allows to design a flexible structure without using float or positioning property. .flex-container { display: flex;} pseudo-class is used to define a particular state of an HTML element (selector:pseudo-class)pseudo-element is used to define a particular  … [Read More]