Integrating sg-avatar Component in Angular Application

What is an Avatar Component?

An avatar component is a user interface (UI) element that displays visual or textual content to represent a user’s identity. Avatars can be used to display information about a user in various places, such as menus, tables, and chats.

I created an avatar component, devloper just need to use the tag and configure it based on their needs.

In this article we will go over how to integrating sg-avatar component with Angular Application in detail.

sg-avatar component integration in Angular Application

Step 1: Adding the component
Go to your root folder of your angular application and use the below command to add the package.

npm i sg-avatar

Your package.json will be updated with the component as shown below.

Step2: Configure the angular.json file

Now you need to configure the angular.json file. You’ll add this configuration under the projects > yourProjectName > architect > build > options > assets section:

"input": "node_modules/sg-avatar/dist/components/assets/",
"output": "/assets/"

Your angular.json should look like this:

Please note that this will copy the images from the avatar component and place it in your application build folder. If you are not going to use male and female images then you can skip this step.

Step 3: Adding the Custom Elements in main

Add an import to main.ts

import { defineCustomElements} from '../node_modules/sg-avatar/loader';

And somewhere near the bottom we’ll call this function.

defineCustomElements();

Please Note: If you are using multiple component then you can define the defineCustomElements as shown below:

import { defineCustomElements as defineCustomElements1} from '../node_modules/sg-copyright/loader';
import { defineCustomElements as defineCustomElements2} from '../node_modules/sg-avatar/loader';
.
.
.
defineCustomElements1();
defineCustomElements2();

Step 4: Adding the Custom Elements Schema in your module

Next, in app.module.ts add the CUSTOM_ELEMENTS_SCHEMA.

import {CUSTOM_ELEMENTS_SCHEMA} from@angular/core;

and then

schemas: [
CUSTOM_ELEMENTS_SCHEMA
]

Your app.module.ts should look like this:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please Note: schemas: [ _CUSTOM_ELEMENTS_SCHEMA _] need to be added to each component where you are using custom HTML tags.

Step 5: Consume it in your Html file.

Now, in app.component.html add the sg-avatar component.

Conclusion:

This sg-avatar component have different options, you can configure it based on your needs.

Options

Example:

Hope this article is useful to you and your project, If you like this article, like & share it with your friends.

Follow Me for more articles.