NGX Focus Point

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.
Responsive support for different aspect ratios and layouts.
Simple, declarative API—no jQuery required.
Includes a Focus Tool for precise focal point selection.
Optimized for Angular projects.

🚀 Installation

Install via npm

npm i @believablecreations/ngx-focus-point

Install via Yarn

yarn add @believablecreations/ngx-focus-point

🚀 Installation & Usage

Import Module


import { NgxFocusPointModule } from './ngx-focus-point/ngx-focus-point.module';

📦 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: `
    <div>
      <h1>Welcome to Angular 19 Standalone Components!</h1>
      <app-ngx-focus-point>
        <img src="your-image.jpg" alt="Sample Image" />
      </app-ngx-focus-point>
    </div>
  `,
})
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;
}

🌐 Links

Built with ❤️ by Believable Creations.

Cart