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
So, earlier with the previous version of Angular if we want to embed the YouTube video to an Angular application, we have to follow certain steps, first, we have to sanitize the URL first then we can bind it as SRC. Below is the snippet which we were using with the earlier versions of Angular,
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:
- app.module.ts
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 and Google Maps both works with angular version 9.x and above.
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:
- 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
Google Map is now officially an angular component with the release of angular version 9.x? yeah, it is true. Now we can use google map like we are using any other component. Just we need to add a google map package and provide google Maps API key to use Google Maps.
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
Now let’s say we want to add the marker to our current location. We can do it by simply adding the below-shown code,
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
Now, let us say we want to display marker Info, when user click on the marker, we can do it by simply creating the click event of the marker and adding map-info-window on the template, as shown below,
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
Now let us say we want to add marker run time to the map, so we will add one button and on click of that button, we will add a new marker to our markers array. And we already have written loop to display all the markers on the map.
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,
