Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ngx-ui-components
Advanced tools
Readme
https://ngx-ui-components.github.io
Ngx-ui-components is a UI library usable with the Angular framework. Ngx-ui-components's vocation is to provide a bunch of component for everyday use. Ngx-ui-components is tree-shakable, so, it's lightweight. Currently, Ngx-ui-components provides:
Install through npm:
npm install ngx-ui-components
OR
yarn add ngx-ui-components
This module may be added in any module of your application. You just have to include this module in your application. For instance:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReadingProgressBarModule } from 'ngx-ui-components/reading-progress-bar';
@NgModule({
imports: [BrowserModule, ReadingProgressBarModule],
})
export class AppModule {}
Under the hood, ReadingProgressBarModule offers one directive that you can apply on any DOM Element, generally a span or a div:
<div class="progression" ngxUiReadingProgressBar></div>
You have to define a css class, for example, like this:
.progression {
margin: 0;
padding: 0;
top: 0;
height: 4px;
position: fixed;
display: block;
width: 0%;
z-index: 12;
background: #e9573f;
}
Now you have progress bar on the top of your page. It's just an example, you can change this css as you want.
This module has to be added in your AppModule
of your application like this:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { GoogleAnalyticsModule } from 'ngx-ui-components/google-analytics';
@NgModule({
imports: [BrowserModule, GoogleAnalyticsModule.forRoot('UA-XXXXXXXX-X')],
})
export class AppModule {}
As you see, you have to use the forRoot
method with, as parameter, your ID Google Analytics.
GoogleAnalyticsModule offers a simple service that allows:
sendPage
method.sendEnvent
method. You can read this article for further information.startGoogleAnalytics
methodYou just have to inject GaService
service and call these methods.
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
constructor(private gaService: GaService) {}
ngOnInit() {
// Start Google Analytics
this.gaService.startGoogleAnalytics();
this.gaService.sendPage(location.pathname);
this.gaService.sendEvent('send', 'event', 'Videos', 'play', 'Fall Campaign');
this.gaService.setPage(location.pathname);
...
this.gaService.sendPageView();
// or you can simply call `ga` method that opens all GA's capacities
this.gaService.ga('send', 'social', 'Facebook', 'like', 'http://myownpersonaldomain.com');
}
}
CookieLawConsentModule provides a simple way for handling the european law concerning the cookies and the private life.
This module has to be added in your AppModule
of your application like this:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CookieLawConsentModule } from 'ngx-ui-components/cookie-consent';
@NgModule({
imports: [BrowserModule, CookieLawConsentModule.forRoot()],
})
export class AppModule {}
As you see, you have to use the forRoot
method. This method accepts a config object ot type CookieLawConsentConfig
:
cookie: CookieOptions
: cookie options - set these values to correspond with your server's strategy.position: PositionType
: position of the banner. The value can be top
or bottom
. Default value bottom
.dismissOnScroll: boolean
: Create a cookie with value dismiss
when the user scroll on the page. Default value false
.allowOnDismiss: boolean
: Allow Google Analytics tracking on dismiss.askConsentText: string
: Message to be shown when the user come.doNotTrackText: string
: Message to be shown when the user has doNotTrack option in his browser.autoOpen: boolean
: The application automatically decide whether the popup should open. Default value true
.acceptButtonText: string
: Label of the "accept" button.acceptButton: boolean
: display the button if true
. Default value true
.declineButtonText: string
: Label of the "decline" button.declineButton: boolean
: display the button if true
. Default value true
.gaProperty: string
: Le Google Analytic ID.Using the feature could be straightforward since you just have to use the component <ngx-ui-cookie-law-consent></ngx-ui-cookie-law-consent>
in your main template like this:
<app-menu></app-menu>
<div class="progression" ngxUiReadingProgressBar></div>
<router-outlet></router-outlet>
<ngx-ui-cookie-law-consent></ngx-ui-cookie-law-consent>
but you can also choose to manage the banner manually thanks to the autoOpen
action. In this case, you have to add a property binding of boolean type:
<app-menu></app-menu>
<div class="progression" ngxUiReadingProgressBar></div>
<router-outlet></router-outlet>
<ngx-ui-cookie-law-consent [opened]="opened"></ngx-ui-cookie-law-consent>
and subscribe to an observable called popupOpen$
like this:
export class ReadingProgressBarComponent implements OnInit {
opened = false;
constructor(private cookieConsentService: CookieConsentService) {}
ngOnInit() {
this.cookieConsentService.popupOpen$.subscribe(() => (this.opened = true));
}
}
One final point concerning the CookieOptions
object. It should be conform with your server and your legislation:
name
: the name of your cookie. Default value 'cookielawconsent'path
: The cookie path. Default value '/'domain
: The domain that the cookie 'name' belongs to. The cookie can only be read on this domain. Default value is emptyexpires
: The cookies expire date, specified in days (specify -1 for no expiry). Default value 365
;secure
: If true the cookie will be created with the secure flag. Secure cookies will only be transmitted via HTTPS. Default value false
sameSite
: SameSite prevents the browser from sending this cookie along with cross-site requests. Default value is emptyMIT
FAQs
## Demo
The npm package ngx-ui-components receives a total of 0 weekly downloads. As such, ngx-ui-components popularity was classified as not popular.
We found that ngx-ui-components demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.