Clash Royale CLAN TAG#URR8PPP

Showing a popup when page loads in Angular 4

I am very new to Angular and I am trying to make a popup in Angular 4 that asks for the user's email when the page loads. I googled and I couldn't find a single example. What is the best service I can use for that task, how is it usually done?

2 Answers
2

Fire up the terminal and type : npm install @ngui/overlay

In your app.module.ts:

import appComponent from './app.component';
import NguiOverlayModule from '@ngui/overlay';

@NgModule
(
declarations: [appComponent ],
imports: [NguiOverlayModule]
);


In your app.component.ts:

import NguiOverlayManager from '@ngui/overlay';
import Component, OnInit from '@angular/core';

@Component
(
selector : 'app-root',
templateUrl : './app.component.html'
)
export class appComponent implements OnInit

constructor
(
public _overlayManager : NguiOverlayManager
)

openPopUp()

this._overlayManager.open('popup-modal', 1);

closePopUp()

this._overlayManager.close('popup-modal');


ngOnInit()

this.openPopUp();




In your app.component.html:

<div id="popup-modal" ngui-overlay-of="window">
<!-- Popup content goes here -->
</div>


Using Bootstrap you can use below method.

First install ngx-bootstrap npm module using below CLI command.
npm install ngx-bootstrap


Now import ngx-bootstap module in your root module like this :
import ModalModule from 'ngx-bootstrap/modal';

@NgModule(
imports: [
ModalModule.forRoot()
]
);


Than import that module in your ts file and use it like this :
import ModalDirective from 'ng2-bootstrap';

// @ViewChild('Same name as your html #Model name') define any name : ModalDirective;
@ViewChild('myModel') myModel: ModalDirective;


// Now use this code to when you want open model :
this.myModel.show();

// Now use this code to when you want hide model :
this.myModel.hide();

In your case you need to call like this

ngOnInit()
this.myModel.show();


In Your HTML File paste this code :

<div class="modal fade" bsModal #myModel="bs-modal"
tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
..
// Write your html here
..
</div>
</div>
</div>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.