First of all import Angular Firestore in the service file and make an alias in the constructor

import { AngularFirestore } from '@angular/fire/firestore';
constructor(
private firestore: AngularFirestore
) { }

To create a custom id in firestore we are using the `set` keyword

this.firestore.collection(mycollectionname).doc(myCustomId).set(data);Example:- Assume collection name is users, and custom id 'VK' with some datalet data = {
firstName: 'Vikas', lastName: 'Kohli'
}
this.firestore.collection('users').doc('VK').set(data);//overwrite or creaate new document

The above statement will create a new document with a custom id as ‘VK’ in the user's collection. …


In this, I will discuss how you can set up the firebase and write to multiple realtime firebase databases.

Firstly you need to set up a firebase project, go to firebase console https://console.firebase.google.com/u/0/ and create a project

Create Firebase Project

There are many functions for the query string. Query string starts from question mark (?). For using different properties, we need to use the ampersand operator (&).

let’s assume the following URL

https://medium.com?user=vikas-kohli&id=3&is-active=1

In the above URL, we‘re using three query params

a. user

b. id

c. is-active

So how do we add these properties in Angular, there are two ways.

//IMport
import { HttpClient, HttpParams } from '@angular/common/http';
//import url files
import {URLS} from './urls';
//initalize in the constructor function
constructor(
private http: HttpClient){
}

1st consider, we’ll use direct 3 variables or 1variable w/o httpParams of HTTP library…


We have seen this common feature in emails or whenever we select anything on other platforms.

Whenever we select all the checkboxes of the list, then the checkbox on the table header shows checked.

All checkbox selected

If no checkbox is selected in the list, then the checkbox is unchecked.


For Using the Adobe EMbed API, we need to create an account in the adobe as in the embed API, there is a client id and if we need to deploy the code in the server then we must have the client id registered to that domain. If not then we not able to use the Adobe Embed APIs.

Also, this library is available in the React and Angular along with the samples which make Angular and React developers easy to integrate the Adobe Embed API.

Let’s integrate into Angular.

In index.html, …


Create the firebase project from the firebase console, if you have already created the project then skip that step.

Now we need to set up the Firebase CLI and node js in our system.

  1. Install NodeJs
  2. Now for the firebase CLI, we need to install via npm
npm install -g firebase-tools

3. We need to login into firebase

firebase login --interactive - for mine that command worksfor some user the below command also works
firebase login
If still problem persists, then please refer to the following issue, they have prescribed some i=options for the login
https://github.com/firebase/firebase-tools/issues/77

After successful login…


Nowadays, most of the websites implementing that feature especially the video player websites, enter fullscreen mode, exit fullscreen mode

Using document.fullscreenElement, we can detect whether we’re in the fullscreen mode or not and previously it is used as document.fullscreen

For this, you can refer https://developer.mozilla.org/en-US/docs/Web/API/Document/fullscreen

Let’s create two buttons or icons in the HTML file, and we show only the button/icon at a time but first let’s show both at the same time

If you’re using Angular material then they are providing these icons by the name of fullscreen and fullscreen_exit

HTML File 
<mat-icon class="screen" (click)="openFullscreen()">fullscreen</mat-icon>
<mat-icon class="screen" (click)="closeFullscreen()">fullscreen_exit</mat-icon>

The…


In the previous story, I wrote how to set up an analytics account so that we can track data, now what if I want to track certain data only.

So for this, there are the events connected in google analytics you can send event by wrapping some unique info, and by using the Google API or embed google API we can get the google analytics data.

app.component.ts File

declare interface Window {
ga: Function;
}

declare var ga: any[];
export class AppComponent {ngAfterViewInit() {
this.router.events.subscribe(event => {
if (event…


So I m going to integrate the google analytics in the website

First of all, before going to integrate you need to set up the analytics account.

After creating an account you need to create a property from where you're getting the tracking code and view id.

Choose Analytics Property

You choose the web


Many times we’re in a situation on clicking on that or this, we need to open new form filed it can be anything like text, dropdown, radio button, checkbox, etc.

Let’s assume I have a select input field on select filed, we need to open other fields

In HTML

<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between">
<mat-label></mat-label>
<mat-form-field appearance="outline" fxFlex="40">
<mat-select placeholder="Select" formControlName="TreatmentAntibiotics" (selectionChange)="changeAntibotics($event)">
<mat-option *ngFor="let antb of antibotics" [value]="antb.v"> {{ antb.n }}</mat-option>
</mat-select>
</mat-form-field>
</div>

In the changeAtibiotics function, I’ll add the new Form control.

TS File

initForm(){

this.form= this.fb.group({
TreatmentAntibiotics: ['', [Validators.required]],
})…

Vikas Kohli

B.E Software Developer, Enthusiastic, Ego-surfing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store