Angular 13 Material Dialog Example – Positions, Fullscreen, Events Tutorial

In this Angular material tutorial, you will learn how to implement Dialog modal with an extensively used scenario tutorial with easy to go tutorial.

You will get to know how to position a Dialog or display a fullscreen modal popup. Explore various events and popup hooks including after opened or closed callbacks. Passing data dynamically to the modal and getting back the data to the parent component.

Read more

Switch Multiple Languages i18n using Ngx-Translate in Angular 12

Integration of multiple language support in Angular application tutorial; In this tutorial, you will learn how to add the Internationalization or i18n in Angular app by utilizing the ngx-translate plugin.

Web application, having multilingual users, deploy internationalization aka i18n support in the application. Using which a web application switches to the native language by analysing the browser or system setting.

Read more

Angular FilePond Tutorial – File Uploader with Life to Level Next!

You read it right! Today we are going to discuss the implementation of an extra ordinary plugin named FilePond. It is the best visual experience, I have ever seen in a simple yet complicated component like a File Uploader.

In this tutorial, you will learn how to FilePond file uploader component in Angular application. Thereafter, we will add a submit button to details of files added. Finally, the files selected can be uploaded to the server in the required formats.

Read more

Angular Radio Button Example – Reactive Form, Get Value, Validation Tutorial

In this tutorial, you will learn how to add the radio button group in reactive form with example. The implementation of radio list control inside the angular reactive forms, which will emit the change event when selected.

Radio form controls are used to allow a user only to select a single value out of a list in the radio group. In angular, we can use either the template-driven forms or reactive forms approach. The reactive forms are ideally used in case, we are trying to build a dynamic form from a provided form control meta-data.

Read more

Angular Material Card Examples – Using mat-card Component

In this article, you will learn how to add the Material Card components to the Angular application. You will learn how to show Avatar, Images, Grid List and Item List in n Material Card with easy examples.

Angular Material is a component library, exclusively built for providing fully compatible UI components for Angular applications. This is developed and designed by the Angular team by keeping the material concepts in view. The UI components provided by Material are compatible with Web and Mobile applications.

Read more

Angular Google Login Example – Social OAuth2 SignIn Tutorial

Angular 12 Login with Google Example by Tutorial; Google authentication of the user using OAuth2 protocol; The Angularx-Social-Login package tutorial; In this elaborated angular tutorial, you will learn how to implement Google login in an Angular 2+ application. We will utilize the angularx-social-login library package.

In today’s era, almost everyone is connected with social media in one or the other ways. The trends of connected a person to an application have now changed a lot. Applications use these social platforms to connect a user to their own applications.

Read more

Angular 12 Multiple ng-content Example – Transclude Templates to Child Component Example

Adding multiple ng-content tags in child component example; placing more than one component passed to transclude in child component; In this Angular 12 tutorial, we will discuss examples of passing more than one component template to the child; Using this we can transclude multiple components at particular places in the child.

Components are the building blocks of Angular application. These components can be placed in application with multiple relations like parent-child, siblings, scattered etc. Sometimes, we also pass components from the parent component to a child component to transclude it in the child component. That transcluded component is then placed in the child, where we add the ng-content tag.

Read more

How to Export PDF from HTML in Angular 12

Generate PDF file from HTML template in Angular 2+ application; In this tutorial, we will discuss how to convert the PDF file from HTML content on-page in Angular application.

PDF means Portable Document Format, it is used to share information in the form of documents. PDF files are more secure than any other format as the data cannot be changed after it is created. Moreover, the PDF files can be shared and printed as a hard copy.

Read more