angular Archives - ProgrammerToday

Angular – RxJS Classes and functions

January 19, 2020January 19, 2020 by maverick

RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code.

RxJS provides an implementation of the Observable type, The library also provides utility functions for creating and working with observables.

RxJs Classes & functions

1. Observable

A representation of any set of values over any amount of time. This is the most basic building block of RxJS.

import { Observable } from 'rxjs';
 
const foo = new Observable(subscriber => {
  console.log('Hello');
  subscriber.next(42);
});
 
foo.subscribe(x => {
  console.log(x);
});
foo.subscribe(y => {
  console.log(y);
});

OUTPUT

"Hello"
42
"Hello"
42

2. BehaviorSubject

Requires an initial value and emits the current value to new subscribers

import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(11);

// two new subscribers will get initial value => output: 11, 11
subject.subscribe(console.log);
subject.subscribe(console.log);

// two subscribers will get new value => output: 22, 22
subject.next(22);

// new subscriber will get latest value (22) => output: 22
subject.subscribe(console.log);

// all three subscribers will get new value => output: 33, 33, 33
subject.next(33);

// OUTPUT :: 11, 11, 22, 22, 22, 33, 33, 33

3. combineLatest

Combines multiple Observables to create an Observable whose values are calculated from the latest values of each of its input Observables.

import { combineLatest, timer } from 'rxjs';

const firstTimer = timer(0, 1000); // emit 0, 1, 2... after every second, starting from now
const secondTimer = timer(500, 1000); // emit 0, 1, 2... after every second, starting 0,5s from now

const combinedTimers = combineLatest(firstTimer, secondTimer);
combinedTimers.subscribe(value => console.log(value));

// OUTPUT Logged
// [0, 0] after 0.5s
// [1, 0] after 1s
// [1, 1] after 1.5s
// [2, 1] after 2s

Summary

In this tutorial we learnt about few important classes of RxJS and its functions.
Hope you like it !

Angular Installation steps and create First angular app

February 22, 2020February 22, 2019 by maverick

Steps – Very simple to follow

1. Install Nodejs

Node.js provides the node package manager which manages the dependencies to run an angular Project. Node.js serves as the run time environment to run javascript based frameworks and applications.

GOTO Node js official link to download and install Node.js https://nodejs.org/en/

Preferably you can download the LTS version as it is the LTS version which has long term support.

TEST for successful node installation :

 Type in cmd prompt > node -v > it will give you a version is installed correctly

2. Install Angular CLI using npm

Type this command in command prompt :

 > npm install -g @angular/cli

Verify angular cli is installed correctly or not

 Type > ng -v

Great ! – now you have successfully installed angular on your machine. Goto Step 3 and create your first angular app, it’s super simple.

3. Create Angular Basic app – using one single command

 > ng new my-dream-app

It will ask a few questions like:

 Would you like to add routing to your app ? click yes or no
Which stylesheet format would you like to use ? CSS/Less/Sass etc, choose one from the options

Voila !

You have created your first angular app

Run it …….

Type in command prompt/shell :

> cd my-dream-app
> ng serve

now open your web browser and type the url :

localhost:4200

Congrats ! – We are done with installing and creating our first basic angular app.

Read Next tutorial -> to Understand the File structure and use of each file in angular app.

Summary

In this tutorial, we learn Step by Step how we can create very first angular app. We Suggest try to follow this tutorial and get started with angular app.
Hope you liked it!

Angular decorators

February 22, 2020February 22, 2019 by maverick

The decorators in Typescript are like annotations in Java, They are just functions that can be used to add meta-data, properties or functions to the thing they are attached to. They give Angular the ability to store metadata for classes and streamline our workflow simultaneously.

Different Types of Angular Decorators

Before we look at creating a custom decorator and why/how Angular uses them, let’s look at the different types of decorators that Angular offers. There are four main types:

Class decorators – e.g. @Component and @NgModule
Property decorators for properties inside classes – e.g. @Input and @Output
Method decorators for methods inside classes – e.g. @HostListener
Parameter decorators for parameters inside class constructors – e.g. @Inject

Examples:

Class decorator Example:

@NgModule({
  declarations: [
    AppComponent, NavbarComponent, routingComponents, HomeComponent, 
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    FormsModule,
    RecaptchaModule.forRoot(), //For Recaptcha
  ],
  providers: [MetaService, Title],
  bootstrap: [AppComponent]
})
export class AppModule { }

And

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  })
export class AppComponent {
  title = 'ProgrammerToday';
}

List of decorators available in Angular:

@NgModule
@Component
@Injectable
@Directive
@Pipe
@Input
@Output
@HostBinding
@HostListener
@ContentChild
@ContentChildren
@ViewChild
@ViewChildren

How to Create custom Decorator ?

Let’s quickly make a decorator that we can use on a class to demonstrate this a little further.

Example : This decorator is just going to simply log a message to the console:

function LoggerConsole() {
  console.log('This is a logger's log');
}

Apply it over a class, for example

@Console
class SampleClass {
  constructor() {
    console.log('Hi!');
  }
}

OUTPUT

This is a logger’s log

Summary

In this article we learnt what is a decorator, how many types of decorators, a couple of examples and how to create your own custom decorator.

Hope you like it !