Official Angular Components: Google Map, YouTube Player, Clipboard!!!

The Angular team builds and maintains both common UI components and tools to help you build your own custom components. The Angular Components team is part of the angular team at Google. They create high-quality UI components,

  • Internationalized and accessible so that all users can use them.
  • Straightforward APIs that don’t confuse developers.
  • Behave as expected across a wide variety of use-cases without bugs.
  • Behavior is well-tested with both unit and integration tests.
  • Customizable within the bounds of the Material Design specification.
  • The performance cost is minimized.
  • The code is clean and well-documented to serve as an example for Angular developers.

(Source Courtesy: https://github.com/angular/components )

So, in this article, I will be integrating all different components provided by an Angular Team.

YouTube Player

import { DomSanitizer } from ‘@angular/platform-browser’;

Then add it to your constructor

videoURL: string='https://www.youtube.com/embed/OXgF9GeoX8o';constructor(private _sanitizer: DomSanitizer){this.safeURL = this._sanitizer.bypassSecurityTrustResourceUrl(videoURL);}

Then bind the value safeUrl to iframe.

<iframe [src]='safeURL' frameborder="0" allowfullscreen></iframe>

(note: Above Code Snippet is for earlier version before 8.x)

So, now with the official release of Angular YouTube Player Component , we can now use it as a simple component. Make sure your Angular application must be greater than version 8.2.x.

Installation

npm install @angular/youtube-player

Setup:

import You-Tube-Player Module to imports array of app.module.ts

2. video.component.html

Just I had provided my Video Id OXgF9GeoX8o, Of my YouTube video which I want to embed to my angular application.

3. video.component.ts

Clipboard CDK

Angular Clipboard CDK will allow us to interact with the clipboard. In order to use CDK, we must need to add an angular material package to our angular application.

Installation

ng add @angular/material

which will also add @angular/cdk to our angular application.

Setup:

  1. app.module.ts

import clipboardmodule to imports array of app.module.ts ,as shown below,

2. cbdemo.component.html

using cdkCopyToClipboard to copy the content to clipboard

3. cbdemo.component.ts

just one variable code on .ts file, nothing else.

Google Map

Installation:

npm install @angular/google-maps

Setup:

1. app.module.ts

add google-maps-module to the imports array of the app.module.ts , as shown below,

2. index.html

Now, on Index.html provide your Maps API key. If you are new to Google Map and don’t know how to get Maps API Key, this documentation can help you to get the Maps API Key,

3. map.component.html

by adding the google-maps component to our Html file, we are already using google maps. Yeah it is so simple, isn’t it?.

Working with Maps

Adding Marker

Here we had used some of the properties of map-like, center, map-options, zoom and etc. most important we had used marker array to plot marker on our map. On my ngOnInit lifecycle hook, I had added my current position to markers array and on my template, I will loop through the markers array and plot the marker on google map. Below is the code of my template.

Adding Map Info Window

Here we created a callback function openInfo(markerEkem,marker.info) and passed ref of the marker itself and info we want to display in map-info-window.

Adding Marker Run time

So finally entire Html will look like below,

and on our map.component.ts file, we will add our call back method addMarker to plot the marker run time,

Download

thanks for reading.

Jinal Shah is corporate trainer on different technology like node.Js, Angular,Ionic 2, BOT Framework etc.