ImageBlock

This library was created with the latest angular version and is tested against an Angular 17 app.

• A simple component to be used within Angular applications.
• This component display images in a grid with fashion.
• Several behaviour can be and suggested to be configured.
• It is developed using Angular >=17.0.0 and its introduces features like standalone components, new template controls and recursive component hierarchy.
• Library location: projects/image-quad directory of this repository.

Examples/Demo

• A simple Example can be found on Azure: https://proud-dune-0a9216403.4.azurestaticapps.net.

Installation of the library

The library is available as an npm package. To install the package run the following command:

npm i image-quad

API

import { ImageQuadComponent } from 'image-quad'
selector: ngx-image-quad

@Inputs()

Usage

Library provides 1 standalone component, which as other modules can be imported to your application in the usual ways.

1. Register the ImageQuadComponent in your app module.

import { ImageQuadComponent } from 'image-quad';

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule, MatInputModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ImageQuadComponent } from 'image-quad';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [AppComponent],
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   FormsModule,
   ReactiveFormsModule,
   MatInputModule,
   MatAutocompleteModule,
   HttpClientModule,
   ImageQuadComponent
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule {}

2. Use (ImageQuadComponent) in your component.

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { AppService } from './app.service';

@Component({
  selector: 'app-root',
  template: `<h3>ImageQuad demo app</h3>
  <div>
    <ngx-image-quad [mode]="'random'" [imagePaths]="imagePaths" [size]="120" [gap]="2"></ngx-image-quad>
  </div>
`
})
export class AppComponent implements OnInit {
  imagePaths = ['./assets/image1.png','./assets/imageAB.png','./assets/image123.png'];

  constructor() {}

}

Configs

As a minimum, you need to specify mode and imagePaths:

<ngx-image-quad [mode]="'random'" [imagePaths]="imagePaths"></ngx-image-quad>

For responsiveness you can detect screen size and set size parameter accordingly:

<ngx-image-quad [mode]="setting!" [imagePaths]="images!" [size]="screenSize == 'Small screen'? 60 : 200" [animation]="'spinAnimation'"></ngx-image-quad>