masonry-component v0.0.1

MasonryComponent

This library was generated with Angular CLI version 13.0.0.

Install using npm package

npm install masonry-component

or

npm i masonry-component

Code scaffolding

Run ng generate component component-name --project masonry-component to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project masonry-component.

Note: Don't forget to add --project masonry-component or else it will be added to the default project in your angular.json file.

HTML Code

<div class="masonry">
  <div class="mItem" *ngFor="let img of images">
    <img src="{{img.imageUrl}}" alt="{{img.caption}}">
  </div>
</div>

TS Code

export class MasonryComponentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  images: any = [{
    caption: "first note",
    imageUrl: "./assets/Image_1.jpg"
  }]

}

NOTE: using user input insert image url and caption in your angular component to the images: any =[{}] array. and use the selector to you component selector: 'lib-masonry-component'

Build

Run ng build masonry-component to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build masonry-component, go to the dist folder cd dist/masonry-component and run npm publish.

Running unit tests

Run ng test masonry-component to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.