Seeking assistance with detecting the end of an HTML video in Ionic2 (Angular2 and Typescript). The relevant code snippets can be found below:
Template:
<video poster="" id="v" playsinline autoplay webkit-playsinline onended="vidEnded()">
<source src="assets/vid.mp4" type="video/mp4">
</video>
Component:
vidEnded() {
console.log("video ended");
this.leavePage();
}
In need of guidance - any help is appreciated. Thank you.
To properly bind an event in Angular 2, you have two options. You can either add a hyphen (-) between the prefix "on" and the event name, or simply remove the "on" prefix and wrap the event name with parentheses (). Both methods achieve the same result, so you can choose whichever you prefer:
on-ended="vidEnded()"(ended)="vidEnded()"For more information on Angular 2 binding syntax, please refer to this link.
If you want to know when an HTML video finishes playing in Angular, you can use the following method:
HTML Template:
<video (ended)="handleVideoEnd()">
<source src="assets/video.mp4" type="video/mp4">
</video>
Component code:
handleVideoEnd() {
// Your logic here
}
Can you please guide me on how to effectively utilize concatMap with getPrices() and getDetails()? export class HistoricalPricesComponent implements OnInit, OnDestroy { private unsubscribe$ = new Subject < void > (); infoTitle ...
What could be causing this error message to appear? Here is my current configuration: "parser": "@typescript-eslint/parser", "parserOptions": { "project": "tsconfig.json", "tsconfigRootDir& ...
Hey there! I have an Angular 5 app on StackBlitz that implements table sorting. You can check it out here: https://stackblitz.com/edit/angular-rxdzom. The code for this app is based on the example from . In the app, I've used a stylesheet at ./app/sor ...
Currently, I am using a regular observable instead of an observableArray. This observable keeps an array of elements which is defined as follows: public arrayOfItems: IArrayItem[]; public arrayOfItems$: BehaviorSubject<IArrayItem[]> = new BehaviorSu ...
Does anyone have a solution for subscribing to responses when the tap operator is used in a service? edit(status) { dataObj.val = status; // call post service with status.. this.service .update(dataObj) .pipe(takeUntil(this._n ...
How can I ensure that a string follows the specific format of x.xx.xxxxx? The first character is mandatory, followed by a period, then two characters, another period, and finally any number of characters of varying lengths. ...
I've been grappling with the idea of unsubscribing from a method in Angular2 once it receives a specific response. settings.component.ts Within my component, the method in question is connectToBridge, where the value of this.selectedBridge is a stri ...
I am attempting to trigger a Scroll Event within the component class when the end of the dropdown list is reached. I have a large list and initially only load the first 30 records in ngOnInit(). As the user scrolls down, I want to update the dropdown list ...
Hello, I am trying to figure out why I am unable to access a child route in my application. I have a sidebar where I want to display a list, and if I want to add or edit an item, I would like the view to change within the sidebar from the list to a form a ...
I am faced with an array containing a long list of Strings, and my goal is to filter out all the strings that begin with 'INSERT ALL' and replace the number inside the parentheses with the string ' NULL' Here is the original array: le ...
In my Angular component, I have 4 fields: customerName, startDate, and startTime. Additionally, I have a fourth field that is a textarea where the user can see the message that will be sent via email or SMS. Within my component, I have defined a string as ...
Would it be possible for me to dynamically choose which script to utilize in my web component? This is how I currently have my imports set up: import * as jQuery from 'jquery'; import 'jqueryui'; Here's what I am aiming to achie ...
Hello there, I've been testing out this sample decorator code and encountered an issue that I can't seem to figure out. The error message I received was "cannot read property 'firstname' of undefined". It appears that the 'this&apo ...
I'm attempting to add a click event to a specific div. Within this div, there is another div that is dynamically generated based on a Boolean condition that I receive as input. Unfortunately, in this case, the click event is only functioning when clic ...
Exploring the functionalities of Angular2, I am attempting to have one module (BreadcrumbDemoModule) import the component from another module (BreadcrumbModule). At the moment, the BreadcrumbModule consists of only one component: ng2-breadcrumb. However, ...
<ul class="nav nav-pills nav-stacked" style="list-style: none"> <li *ngFor="#el of dragZoneElems; #idx = index"> <h4 style="position: fixed; top:'idx'*10" [dragResponder]="el">{{el.first}} {{el.last}}</h4& ...
I recently encountered a challenge while working on my web project. What are some areas that can be improved? import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import {map} from 'rxjs/op ...
I have come across a project requirement where I need to display the number of active users on each page. I am considering various approaches but unsure of the best practice in these scenarios. Here are a few options I am considering: 1. Using SignalR 2. ...
I have encountered an issue with my Ionic 3 Android application where the startup time is longer than desired, around 4-5 seconds. While this may not be excessive, some users have raised concerns about it. I am confident that there are ways to improve the ...
I am working on a carousel that functions as a form. One of the carousel items contains a multi-select box. How can I automatically increase the height of only that specific carousel item as the height of the multi-select box increases? The first image sh ...