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) 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 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]

css

CSS Tips

Posted Leave 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]

html javascript

HTML Tips

Posted Leave a commentPosted in Technology

Linking script and stylesheet in HTML <script src=”main.js”></script><link href=”style.css” rel=”stylesheet”></link> ———— New in HTML5canvas | audio | svg | header | footer | aside | article | nav | section etc… ————– CSS Reset – Removes browser default stylesNormalize.css – Sets a stndard across all browsers ———– parseInt(“20″) + 20 = 40; —– Semantic HTML – Semantic tags like header, nav, section, footer, etc are used that convey infomation about the content. ————- HTML4 vs HTML5=> HTML4 DOCTYPE declaration was too length, while in HTML5, it’s just <!DOCTYPE html>=> HTML5 has more semantic tags and also has multimedia supporting attributes=>  … [Read More]

javascript

Algorithms in JavaScript

Posted Leave a commentPosted in JavaScript, Technology

SECTION 1 – Introduction Introduction to AlgorithmsAlgorithms make programs run better and faster. SECTION 2 -FizzBuzz IntroductionA function that will take a number and log all the numbers from 1 till that given number.Additionally, if the number to be logged is divisible by 3, then log ‘Fizz’, if divisible by 5, then log ‘Buzz’ and if by both 3 & 5, then log ‘FizzBuzz’ Modulus Operator – It returns the remainder of a division. Code function fizzBuzz(num) {    for (var i = 1; i<= num; i++) {        if (i % 3 === 0 && i % 5 === 0) {  … [Read More]

javascript

Data Structures in JavaScript

Posted Leave a commentPosted in JavaScript, Learning, Technology

1. What are Data Structures and why are they ImportantData Structures are way of organizing data that is stored in a computer or database. Each type of data structure represents a different way of organizing the data.There are different types of data structures because they have different strengths and weaknesses.Some are fast at storing and slow at retrieving and some vice-versa. Importance of Data Structures:– Data structures have big impact on performance, quick and efficiently a program runs. Example, when we need to store data at a faster pace, we can use linked list. Or when we need to access  … [Read More]

javascript

Understanding the Weird Parts of JavaScript

Posted Leave a commentPosted in JavaScript, Learning, Technology

SECTION 1 – Getting Started 1 – Introduction and the Goal of the CourseThe goal is to understand how JavaScript works under the hood.2 – Setup3 – Big Words and JavaScript4 – Watching this Course in High-Definition5 – Understanding Frameworks and the Weird Parts SECTION 2 – Execution Contexts and Lexical Environments 6 – Conceptual Aside: Syntax Parsers, Execution Contexts and Lexical EnvironmentsSyntax parser – A program that reads the code and determines what it does and if it’s grammar is valid – Is done character by characterLexical Environment – Where something sits physically in the code that is writen.Execution  … [Read More]

angular params queryparams fragment

Working with Params, QueryParams and Fragments in Angular

Posted Leave 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 Leave 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]