DEV Community

Sudhakar George
Sudhakar George

Posted on

Integrating sg-avatar Component in Angular Application

Image description

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.

Image description

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/"
Enter fullscreen mode Exit fullscreen mode

Your angular.json should look like this:

Image description

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.

Image description

Image description

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();

Enter fullscreen mode Exit fullscreen mode

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 { }
Enter fullscreen mode Exit fullscreen mode

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

Image description

Example:

Image description

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.

Top comments (0)