Confirming activation of Angular before it’s loaded
Complete implementation and use cases
Published in
2 min readJul 2, 2018
Today let’s take a brief look at a situation where we need to launch a part of an application before it’s fully loaded.
Why would we need that?
- To confirm the user’s age
- To get the user’s agreement to Terms of Service
- To display the login form
- To enable switching the language from the loading page
NgxCanActivateApp!!! 🎉
This library launches and renders your component all by itself. You specify the exact moment for your application to start.
You need to take five simple steps before you can use it.
Install ngx-can-activate-app
npm i -s ngx-can-activate-appCreate a component
It will be displayed until your application has finished activating.
import { NgxCanActivateApp } from 'ngx-can-activate-app';@Component({
selector: 'app-confirmation',
template: '<button (click)="onActivate()">Activate</button>'
})
export class ConfirmationComponent {
constructor(private canActivateApp: NgxCanActivateApp) {} onActivate() { this.canActivateApp.activate(); }
}
Declare the component
Add it to declarations.
@NgModule({
declarations: [ AppComponent, ConfirmationComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}Import NgxCanActivateAppModule
Then add your component to the module’s initialization.
import { NgxCanActivateAppModule } from 'ngx-can-activate-app';@NgModule({
imports: [
NgxCanActivateAppModule.forRoot({
component: ConfirmationComponent
})
],
declarations: [ AppComponent, ConfirmationComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
Specify a selector in index.html
Add the selector of your component to index.html.
<!doctype html>
<html lang="en">
<head></head>
<body>
<app-root>
<app-confirmation></app-confirmation>
</app-root>
</body>
</html>Source code on github, demo on stackblitz.
Contact me via Telegram (@thekiba) if you have any questions.
