MetroLayoutAngular

This library was generated with Angular CLI version 18.2.0.

Installation

To install this library, run:

$ npm install metro-layout-angular --save

Use force if you have version conflicts:

$ npm install metro-layout-angular --force

How we can use in angular? :

1. Responsive Layout due to width and height aspect ratio.

Import js files in your angular.json:

   "node_modules/metro-layout-angular/assets/jquery.js",
   "node_modules/metro-layout-angular/assets/metro-layout-auto-responsive.js"

Html file:

     <metro-layout-auto-responsive
         [array]="projectsList"
         (handleImageClick)="onImageClick($event)"
      >
      </metro-layout-auto-responsive>

Ts file:

     logoUrl = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrBwARZpC1OVgQCHh9JbNmL52o4rWFjVwlEw&s';
   array: any = [
      {
         width: 200,
         height: 100,
         logoUrl: this.logoUrl,

      },
      {
         width: 100,
         height: 100,
         logoUrl: this.logoUrl,
      },
   ];
   onImageClick(item: any): void {
    console.log(item, 'get item details where you clicked.');
  }

2. Fixed Layout due to width and height aspect ratio.

Import js files in your angular.json:

   "node_modules/metro-layout-angular/assets/jquery.js",
   "node_modules/metro-layout-angular/assets/metro-layout-fix-width.js"

Html file:

     <metro-layout-fix-width
         [array]="projectsList"
         (handleImageClick)="onImageClick($event)"
      >
      </metro-layout-fix-width>

Ts file:

     logoUrl = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrBwARZpC1OVgQCHh9JbNmL52o4rWFjVwlEw&s';

   array: any = [
      {
         width: 200,
         height: 100,
         logoUrl: this.logoUrl,

      },
      {
         width: 100,
         height: 100,
         logoUrl: this.logoUrl,
      },
   ];

   onImageClick(item: any): void {
    console.log(item, 'get item details where you clicked.');
  }