Integrating Copyright Component in Angular Application

A “copyright functionality” on a website refers to the practice of displaying a copyright notice, typically in the footer, which indicates that the content on the site is protected by copyright and belongs to the website owner, usually including the copyright symbol, the year of publication, and the owner’s name, essentially informing users that they cannot copy or use the content without permission

I created a copyright component; developers just need to use the tag based on their needs. In this article, we will go over how to integrate the Copyright component with an Angular Application in detail.

Adding sg-copyright package

Step1: Add the sg-copyright package to your application

In your Angular application go to the root folder and install the sg-copyright library via npm. This will install the latest version of the library:

npm i sg-copyright

Once the package is installed successfully, Your package.json will be updated with the sg-copyright package.

Step2: Configure the main.js file

Add an import to main.js

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

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

defineCustomElements();

your main.js file looks like this

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

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

platformBrowserDynamic().bootstrapModule(AppModule, {
  ngZoneEventCoalescing: true
})
  .catch(err => console.error(err));
  defineCustomElements();

Step3: Update the app.module.ts file

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.
Say, for example, if you use the sg-copyright in your footer component, then your footer component looks like this.
import { Component } from '@angular/core';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'app-footer',
  standalone: true,
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  templateUrl: './footer.component.html',
  styleUrl: './footer.component.css'
})
export class FooterComponent {
}

Step4: Consume the component in html file

Now consume the component in your HTML file (footer component)as show below

<sg-copyright placement="center" from="2020" company="ABCD Crop" locale="en" color="#ffffff"></sg-copyright>

You can configure the component based on your application style. Here all parameters are optional.

You can also find the sg-copyright information on npm website.

Example

 <footer id="footer">
   <div class="rodape">
     <sg-copyright placement="center" from="2020" company="ABCD Crop" locale="en" color="#ffffff"></sg-copyright>
   </div>
  </footer>

Output