I have video player in my angular8 application with help of ngx-embeded-video i need to disable default player opiton like pause, maxi window, volume, play option. Also that video need to play angular material modal popup on that pop all the player option need to enable. The video play is shown below When the user click on this video that time angular material modal need to open and play same video i have tried model open but not working i need help on this.
html:
ts:
import { EmbedVideoService } from 'ngx-embed-video';
import { CarPopupModalComponent } from '../car/car-popup-modal/car-popup-modal.component'
export class CarComponent implements OnInit {
videos: any;
vimeoUrl = 'https://vimeo.com/197933516';
constructor(private embedService: EmbedVideoService){
this.videos = this.embedService.embed(this.vimeoUrl);
}
openCarDialog(): void {
console.log('inside the modal');
this.dialog.open(CarPopupModalComponent, {
width: '250px',
data: {}
})
}
}
I was achieved via following angular supporting package "https://www.npmjs.com/package/mat-video"
npm install --save mat-video
import to module,
import { MatVideoModule } from 'mat-video';
#NgModule({
imports: [
BrowserAnimationsModule,
MatVideoModule
],
})
export class AppModule { }
html:
<mat-video title="{{'Advertisement Video' | translate}}" [autoplay]="false" [preload]="false" [fullscreen]="false" [download]="false"
spinner="spin" (click)="openCarDialog()">
<source matVideoSource src="../../../assets/videos/fourkvideo.mp4" type="video/mp4">
ts:
Vidoe can play angular madal pop by
openCarDialog(): void {
console.log('inside the modal');
this.dialog.open(CarPopupModalComponent, {
width: '720px',
height: '500px',
data: {}
})
}
Related
i have issue how to show nav icon if open in mobile screen,
this is the code is bellow
export default {
data () {
return {
navIcon:false
}
},
computed:{
},
methods:{
reversedMessage: function () {
return this.navIcon=true
},
test:function(){
if(screen.width < 960){
return this.navIcon=true
}
}
}
}
Use media breakpoints in CSS or if you don't want to go in that direction just use this plugin of vue vue-breakpoints . It will save your time as well on applying logics. Use show-at and hide-at with breakpoints according to your requirement
I'm using this npm library https://www.npmjs.com/package/ng-offline to alert end user when offline.
<div class="alert alert-danger" ngOffline>You're offline. Check your connection!</div>
stackblitz here: https://stackblitz.com/edit/angular-ngoffline-npm?file=src%2Fapp%2Fapp.component.html
Works great - BUT I want to open a modal with this ngOffline directive, so I'm trying to access the directive from my angular 11 component but not sure how to approach this, any help on this would be greatly appreciated.
Is there away for me to open a ngx-bootstrap modal from the html with this directive?
Because the ng-offline module isn't exporting things as you might expect (i.e. you can't inject a standalone NgOfflineDirective for you to use without having it in your html file), you could add a block like this (where you've used #trigger to identify your ngOnline element):
import { AfterContentChecked, Component, ElementRef, OnDestroy, ViewChild } from '#angular/core';
import { BehaviorSubject, Subscription } from 'rxjs';
import { distinctUntilChanged, filter } from 'rxjs/operators';
#Component({ ... })
export class YourClass implements AfterContentChecked, OnDestroy {
offline$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>();
subscription: Subscription;
#ViewChild('trigger') trigger: ElementRef;
constructor() {
this.subscription = this.offline$.pipe(
distinctUntilChanged(),
filter((offline: boolean) => offline),
).subscribe(() => this.showModal());
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
ngAfterContentChecked() {
if (
this.trigger &&
this.trigger.nativeElement
) {
this.offline$.next(this.trigger.nativeElement.style.display === "none");
}
}
showModal() {
console.log('Show your modal here.');
}
}
I have probably very profoundly simple question: how to invoke methods located in components from store.js, for instance I want a toast popup from store mutation. Any ideas?
The $bvToast can be found in BToast export. You can import it to use it.
import { BToast } from 'bootstrap-vue'
Example Class
import { BToast } from 'bootstrap-vue'
class uiUtils
{
showToast(message : string,title : string){
let bootStrapToaster = new BToast();
bootStrapToaster.$bvToast.toast(message, {
title: title,
toaster: "b-toaster-top-right",
solid: true,
appendToast: false
})
}
}
export default new uiUtils();
The documentation does show the individual component exports at the bottom of the page and can be found here Bootstrap Vue Documentation.
I use a sidemenu project with ionic v4-beta3
I want to disable sidemenu on some pages, /login for example.
It's working properly when i load /home page first then i navigate to /login page. Sidemenu desapear as expected.
When i reload my application on /login page, menu is not disabled.
import { Component, OnInit } from '#angular/core';
import { MenuController } from '#ionic/angular';
#Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
constructor(
private menuController: MenuController
) {}
ngOnInit() {}
ionViewWillEnter() {
console.log('ionViewWillEnter');
this.menuController.enable(false);
}
ionViewDidLeave() {
console.log('ionViewDidLeave');
this.menuController.enable(true);
}
}
If a use a setTimeout of 100 or 200 ms to call enable method, side menu desapears but it's not very clean...
ionViewWillEnter() {
console.log('ionViewWillEnter');
const timer = setTimeout(() => {
clearTimeout(timer);
this.menuController.enable(false);
}, 100);
}
Another work-around is to show ion-menu when window.location.pathNameis not equal to /login with a *ngIf directive. It's working but i find this not very clean too...
Ionic Infos
Ionic:
ionic (Ionic CLI) : 4.1.1
Ionic Framework : #ionic/angular 4.0.0-beta.3
#angular-devkit/core : 0.7.4
#angular-devkit/schematics : 0.7.4
#angular/cli : 6.1.4
#ionic/ng-toolkit : 1.0.6
#ionic/schematics-angular : 1.0.5
This issue appears to be resolved in 4.0.0-beta.12 with the following:
ionViewDidEnter() {
this.menuController.enable(false);
}
ionViewDidLeave() {
this.menuController.enable(true);
}
The MenuController.enable() method is asynchronous.
You can create a Guest/Authenticated guard and enable it there, and then use it in pages using the canActivate route parameter in your pages. Then, when your page loads, the menu will be configured properly. For example, for authenticated guard:
#Injectable({
providedIn: 'root',
})
export class AuthenticatedGuard implements CanActivate {
constructor(private menuController: MenuController) {}
async canActivate(): Promise<boolean> {
const isAuthenticated = true; // Adjust where you get this value
await this.menuController.enable(isAuthenticated);
return isAuthenticated;
}
}
This will work for Ionic4/5.
You should use menuId property in your <ion-menu/> components for fine-tune identity and be able to use multiple menus. Then you can call .enable(isAuthenticated, menuId);
I am new in angular 5. I want to create a mock json data in my service and i want to create a Spinner loader when i clicked the button .To display the spinner few seconds,in Angular 5 .
Thank you.
you can use ngx-spinner in your project. It's very easy to install and you have many options of spinner.
First Step: Install the lib
npm install ngx-spinner --save
Second step:
Import the lib in your module (app.module.ts)
// Import library module
import { NgxSpinnerModule } from 'ngx-spinner';
#NgModule({
imports: [
// ...
NgxSpinnerModule
]
})
export class AppModule { }
Third step: Add (or edit) the code below in your app.component.html
<ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="medium" color="#dd8f44" type="line-scale-pulse-out-rapid"></ngx-spinner>
Fourth step: Use in your component or service
import { NgxSpinnerService } from 'ngx-spinner'; <--
#Component({
selector: 'app-client',
templateUrl: './client.component.html',
styleUrls: ['./client.component.scss']
})
export class ClientComponent implements OnInit {
constructor(
private spinner: NgxSpinnerService <--
) { }
ngOnInit() {
this.spinner.show(); <---
setTimeout(() => {
this.getClients();
this.spinner.hide(); <---
}, 1000);
}
}
I hope I helped you
You can use Angular Material Progress Bar.