This content originally appeared on DEV Community and was authored by Sudhakar George
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
Conclusion:
This sg-copyright copyright has different options, you can configure it based on your needs.
sg-copyright components options
I 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.
This content originally appeared on DEV Community and was authored by Sudhakar George
Sudhakar George | Sciencx (2024-11-03T18:16:37+00:00) Integrating Copyright Component in Angular Application. Retrieved from https://www.scien.cx/2024/11/03/integrating-copyright-component-in-angular-application/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.