NGX Focus Point v19.0.4

Effortlessly manage image and video focus for modern, responsive layouts with NGX Focus Point. Whether your image needs to adapt to portrait, landscape, or square spaces, this Angular component ensures your subject always stays in the spotlight.

No more awkward clipping, misplaced subjects, or resizing issues. NGX Focus Point lets you define the perfect focal point for your media, giving you seamless results across all screen sizes and layouts. 🚀

Demo and Focus Tool

✨ Features

Works with images and videos.
Supports video focus over time with an array of VideoPositions.
React to actions like play, pause, and stop.
Update video position dynamically using time from the parent component.
Control debounceResizeUpdate for performance optimization during resize.
Adjust animation speed with animationSpeed.
Responsive support for different aspect ratios and layouts.
Simple, declarative API—no jQuery required.
Includes a Focus Tool for precise focal point selection.
Integrated with the new ngx-focus-point-video-timeline component.
Optimized for Angular projects.

🚀 Installation

Install via npm

npm i @believablecreations/ngx-focus-point

Install via Yarn

yarn add @believablecreations/ngx-focus-point

🚀 Usage

Example of Video Focus Over Time

Define video positions with an array of VideoPosition:


export interface VideoPosition {
  x: number;
  y: number;
  w?: number;
  h?: number;
  s?: number;
  time: number;
}

export type VideoPositions = Array<VideoPosition>;

Example usage in a component:


<ngx-focus-point [focus]="[
  {x: 0.5, y: 0.5, time: 0},
  {x: 0.7, y: 0.3, s: 1.0, time: 5},
  {x: 0.2, y: 0.8, time: 10}
]" [actions]="'play'" [time]="5" [debounceResizeUpdate]="50" [animationSpeed]="'500ms'">
  <video autoplay loop>
    <source src="your-video.mp4" />
  </video>
</ngx-focus-point>

📦 Standalone Components in Angular 19

As of Angular 19, you can use standalone components. Just import the component and use it directly in your template:

Create a Standalone Component


import { Component } from '@angular/core';
import { NgxFocusPointComponent } from './ngx-focus-point.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxFocusPointComponent],
  template: `
    <ngx-focus-point [focusX]="0.0" [focusY]="0.0" [scale]="1">
      <img src="your-image.jpg" alt="Sample Image" />
    </ngx-focus-point>
  `,
})
export class AppComponent {}

Use 'ngx-focus-point' Component

Define your focal point using focusX and focusY:


<ngx-focus-point [focusX]="0.0" [focusY]="0.0">
  <img src="your-image.jpg" />
</ngx-focus-point>

Video Support (as of version 14)


<ngx-focus-point [focusX]="0.0" [focusY]="0.0">
  <video autoplay loop muted="true" playsinline webkit-playsinline="true">
    <source src="your-video.mp4" />
  </video>
</ngx-focus-point>

Use 'ngx-focus-point-select' Component

Capture the focal point dynamically:


<ngx-focus-point-select (positionChange)="updateFocus($event)" src="your-image.jpg"></ngx-focus-point-select>

PositionModel Structure:


PositionModel {
  x: number;
  y: number;
  w: number;
  h: number;
  s?: number;
}

🐞 Known Bugs

Parent Element Without Defined Size: When the parent element does not have a set size, ngx-focus-point may not function correctly in some cases. For example, setting height: 100% on the parent may cause issues, while explicitly setting height: 500px will work correctly. Fix coming in the next update.

🌐 Links

Built with ❤️ by Believable Creations.

Cart