jelgblad / angular2-masonry Goto Github PK

View Code? Open in Web Editor NEW

101.0 101.0 50.0 54 KB

https://github.com/desandro/masonry module for Angular2

TypeScript 100.00%

angular2-masonry's People

Contributors

Stargazers

Watchers

Forkers

gearsandcode crizzwald seonetartem bradyisom digitalkaoz ryandivis pkrawat1 rambuto at-fe-support harisb2012 sceptic cjsheets asnapper flavienb pedrohills denebdesign voropash kf-thomasglaser nodify-at frankistan 4loopph geex-arts ictniklaswilhelm mattvaughan dbartumeu puzzle stasdoskalenko medeasolution horkenw kienphan glinkot seawenzhu 2009 fivelike bl4ckpix3l nightwolfy jorroll waiwai0308 uchu serhiitsybulskyi mindmutex manojazad flaviencathala shad1w skmbw angular-library

angular2-masonry's Issues

Can't bind to 'options' since it isn't a known property of 'masonry'

Hi, I have i problem with binding options property to masonry component. In console i'm giving this error:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'masonry'. ("

    <section>
        <masonry *ngIf="posts.length > 0" [ERROR ->][options]="masonryOptions" >
            <masonry-brick *ngFor="let post of posts" class="brick">
 "): ChatApp@13:42 ; Zone: <root> ; Task: Promise.then ; Value: BaseException {message: "Template parse errors:↵Can't bind to 'options' sin…post of posts" class="brick">
↵ "): ChatApp@13:42", stack: "Error: Template parse errors:↵Can't bind to 'optio…ttp://localhost:50000/Scripts/zone.min.js:1:7976)"} Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'masonry'. ("

    <section>
        <masonry *ngIf="posts.length > 0" [ERROR ->][options]="masonryOptions" >
            <masonry-brick *ngFor="let post of posts" class="brick">
 "): ChatApp@13:42
    at new BaseException (http://localhost:50000/node_modules/@angular/compiler/bundles/compiler.umd.js:5116:27)
    at TemplateParser.parse (http://localhost:50000/node_modules/@angular/compiler/bundles/compiler.umd.js:8318:23)
    at RuntimeCompiler._compileTemplate (http://localhost:50000/node_modules/@angular/compiler/bundles/compiler.umd.js:15941:55)
    at http://localhost:50000/node_modules/@angular/compiler/bundles/compiler.umd.js:15869:87
    at Set.forEach (native)
    at compile (http://localhost:50000/node_modules/@angular/compiler/bundles/compiler.umd.js:15869:51)
    at e.invoke (http://localhost:50000/Scripts/zone.min.js:1:7347)
    at e.run (http://localhost:50000/Scripts/zone.min.js:1:4734)
    at http://localhost:50000/Scripts/zone.min.js:1:3330
    at e.invokeTask (http://localhost:50000/Scripts/zone.min.js:1:7976)

Here's my component:

import { MasonryModule, MasonryOptions } from 'angular2-masonry';

@NgModule({
    imports: [
        MasonryModule
    ]
})

@Component({
    selector: 'chat-app',
    properties: ["postformenable", "teamid"],
    templateUrl: "/angular/views/app.html",
    directives: [Post],
    styles: ['.brick { width: 250px; }']
})

export class ChatApp {
 ...
    public masonryOptions: MasonryOptions = {
        transitionDuration: '0.8s',
        percentPosition: true,
        gutter: 23    
    };
...

And app.html:

 <section>
        <masonry *ngIf="posts.length > 0" [options]="masonryOptions" >
            <masonry-brick *ngFor="let post of posts" class="brick">
            ....
          </masonry-brick>
        </masonry>
</section>

What is wrong please? Thank you.

Add bricks only after all images are loaded

Is it possible to wait for all images to be loaded before adding bricks? Using imagesLoaded, each brick gets added after that brick's images are loaded. This results in the order of bricks when you initially load the page to be different from when images are cached and available immediately. I'd rather wait for all bricks' images are loaded before adding any bricks to ensure that the same bricks are in the same order every time.

watchForHtmlChanges is not working in IE 10

Changedetection over watchForHtmlChanges() on Brick Component does not work because window.MutationObserver || window.WebKitMutationObserver is undefined. Are there some polyfills available that need to be included to get that work?

Add Angular 4+ compatibility

Server side errors with Angular Universal

}( window, function factory( Outlayer, getSize ) {
^
ReferenceError: window is not defined

Positions of items are not correct initially

When the page initially loads, all items are in the right column and order, but are stacked on top of each other in an offset. It takes me clicking on an item to trigger a transition where all the items are placed properly. The grid then continues to work as I add or remove items.

<masonry>
	<masonry-brick *ngFor="let key of myKeys" class="brick">
		<my-item [itemKey]="key"></my-item>
	</masonry-brick>
</masonry>

.brick { 
	width: 25%; 
}

screenshot of items overlapping

Is there some option I need to set so that it puts images in the correct position in the initial load?

Images collapse after navigation

I have all the images in the home page tabs . Works fine.
After navigating to different several pages and coming back to Home Page all the images collapse, only one image is seen and all one above other.
what is the issue here?

Not found masonry-layout

Thank you for you angular2-masonry component. But I have a problem. I did everything according instrution, but got error:

GET http://localhost:3000/masonry-layout 404 (Not Found)   zone.js:101
Error: Error: XHR error (404 Not Found) loading http://localhost:3000/masonry-layout(…) (index):25

Production ready?

Guys just wondering, When do you think this library is going to be ready for production usage. Are there people still working on it? Is it a new upgrade that works with angular 5 and CLI?

The columnWidth should be allowed to be a string value

Trying to integrate nicely with bootstrap i need to be able to resize/constrain the number of columns based on screen resolution.
In the end I need to achieve something like this
http://masonry.desandro.com/extras.html#bootstrap
"use 2, then 3, then 4 columns at different screen sizes"

The problem is that the columnWidth is expose as number rather than as string,

// angular2-masonry
columnWidth?: number;

while the width could be inferred from the grid-sizer

// masonry-layout
columnWidth: '.grid-sizer',

Is there another approach i can rely on to achieve this kind of a scenario?

Bricks start from left position initially.

Hi
I am facing issue which is pretty annoying. When bricks start initially they start from left position. I used imagesloaded = true and see no errors in console.

  <div class="masonryContainer">
    <masonry [useImagesLoaded]="true"  [options]="myOptions" *ngIf="showEmployees" >
      <masonry-brick *ngFor="let employee of employees" class="brick " >
        <div class="employeeBox" >
          <div class="employeePhoto">
            <img src="assets/icons/user.svg">
          </div>
          <div class="employeeInfo">
            <p>{{employee.name}}</p>
          </div>
          <div class="employeeBottom">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </masonry-brick>
    </masonry>
  </div>

The interesting is that I use masonry also in another component with same code and facing no issue.
What is the cause of it? Hope someone give advice.

Question : Is the package compatible with Angular AoT ?

Hello,

Just wandering if your package was actually compatible with AoT technique (more info here : https://angular.io/docs/ts/latest/cookbook/aot-compiler.html).

Thanks !

Is this project dead?

Is this project still maintained?
Why is the author not accepting or reviewing pull request?

Really I like this project. And I have a project that depends on this library. Please provide any response or give to us access to maintain the repo.

Best regards.

Error masonry.default

Hi there,

I get the following error in the console:
`TypeError: masonry.default is not a constructor``

Any idea why that would happen?
I have imported the directives.

Error when compiling with gulp-typescript src/masonry.ts' is not under 'rootDir'

When compiling my project with gulp-typescript version 3.1.3, it generates below errors:
I am using angular2-masonry version 0.3.0

TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
[23:24:17] TypeScript: 4 options errors
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
[23:24:17] TypeScript: 1372 emit errors
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
[23:24:17] TypeScript: emit failed
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/brick.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry-options.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/masonry.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
error TS6059: File 'D:/MyProject/node_modules/angular2-masonry/src/module.ts' is not under 'rootDir' 'D:/MyProject/app/'. 'rootDir' is expected to contain all source files.
[23:24:17] Finished 'CompileTS' after 13 s

using reloadItems() in Angular 2

Dear @jelgblad,
could you please show me how to use reloadItems() in Angular 2? There's no documentation about that. Thank you a lot.

Adding module does not work for Ionic project

I had to import { AngularMasonry,AngularMasonryBrick } from 'angular2-masonry'; in app.module.ts in order to make it work.

See: https://github.com/Tommertom/ionicmasonry

Thx anyway for the work done!!

Safari Browser error

this is my package.json while using the 0.4.1 in safari , there's an error of "ReferenceError: Strict mode forbids implicit creation of global property 'MutationObserver'
i've encountered this error only in safari, not in any other webkit browser
"

"dependencies": { "@angular/common": "~2.4.5", "@angular/compiler": "~2.4.5", "@angular/core": "~2.4.5", "@angular/forms": "~2.4.5", "@angular/http": "~2.4.5", "@angular/material": "^2.0.0-beta.1", "@angular/platform-browser": "~2.4.5", "@angular/platform-browser-dynamic": "~2.4.5", "@angular/router": "~3.4.5", "angular2-cookie": "^1.2.6", "angular2-masonry": "^0.3.1", "angular2-moment": "^1.1.0", "core-js": "^2.4.1", "ng2-page-scroll": "^4.0.0-beta.1", "ng2-slim-loading-bar": "^2.0.7", "rxjs": "5.1.0", "ts-helpers": "^1.1.1", "zone.js": "^0.7.6" }, "devDependencies": { "@angular/compiler-cli": "^2.3.1", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.24", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.0.2", "typescript": "~2.0.3" }

Trigger layout method

I want to trigger layout method every time that I add some content to the masonry-brick element, there is a way to get the _msnry Objet once layoutComplete is triggered?

Support for other frameworks that only system js

It seems completely reliant on systemjs atm. It would be much more community friendly if a more neutral approach was taken

Failing to build for production

I am using this in my Angular 4 application and everything seems to be working ok so far. It works perfectly fine with a dev build, but as soon as I try to build it for production (with AOT) i get the error below:

> [email protected] build:prod /home/fabio/workspace/tcd
> del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'
Unexpected value 'MasonryModule in /home/fabio/workspace/tcd/node_modules/angular2-masonry/index.d.ts' imported by the module 'AppModule in /home/fabio/workspace/tcd/assets/app/app.module.ts'. Please add a @NgModule annotation.

Any ideas why is it failing only when i build it for production?

EDIT: What is causing the error is AOT compilation, i.e., ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json

Below my successful dev build:

npm run build

> [email protected] build /home/fabio/workspace/tcd
> del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch

  0% compiling
Webpack is watching the files…

 10% building modules 0/1 modules 1 active ...ce/tcd/assets/app/main.ts
[at-loader] Using [email protected] from typescript and "tsconfig.json" from /home/fabio/workspace/tcd/tsconfig.json.

10598ms building modules                                                                 
48ms sealing
5ms optimizing 
0ms basic module optimization 
10ms module optimization
1ms advanced module optimization 
0ms basic chunk optimization 
0ms chunk optimization 
1ms advanced chunk optimization 
5ms module and chunk tree optimization 
17ms module reviving
3ms module order optimization 
6ms module id optimization 
5ms chunk reviving 
0ms chunk order optimization 
22ms chunk id optimization
57ms hashing
1ms module assets processing 
663ms chunk assets processing
4ms additional chunk assets processing 
0ms recording 
0ms additional asset processing 
0ms chunk asset optimization 
807ms asset optimization
174ms emitting
Hash: 362e24432280d758943f
Version: webpack 2.7.0
Time: 12490ms
    Asset   Size  Chunks                    Chunk Names
bundle.js  11 MB       0  [emitted]  [big]  app

useImagesLoaded mess the list

hello,
I have to use the useImagesLoaded because otherwise my elements will overlap each other...
Unfortunately most of the time with this property the masonry doesn't keep the sorting of the elements.. the slower images (slow resource... load in.. etc) will be in the end of the list and it is basically really annoying...

Can't make component redraw new array in order.

If I drive my masonry-brick elements with an ngFor call against an array, when I reload that array with a new item, it always pushes it to the bottom (appends). Note that I'm not pushing something onto the array - it is a new array obtained from a subscription. I have called masonry._msnry.reloadItems, which does nothing, and 'masonry.layoutwhich also does nothing. (I've also tried callingreloadItemsfollowed bylayout` which also does nothing).

If I reload the page, the items render in the correct order.

How do I force masonry to redraw using the new array's order like it does on initial load?

SystemJs Static Bundle ErrorUncaught Module ./item not present.

Hi,

When I use SystemJS builder.buildStatic to bundle my app and run it in browser, the application doesn't work and I see the below error on the console:

bundle.js:1 Uncaught Module ./item not present.

I am following the instructions mentioned on:

https://github.com/jelgblad/angular2-masonry

Everything works fine, if I don't create a bundle.

Can anyone please guide?

Cannot build with Webpack

Hi guys!

Thanks for all the work, it really attends to a big requirement on the project that I'm working right now!
The problem is, it's doing fine on my localhost tests, but once I move it to server and try a ng build, I get this error:

ERROR in Error encountered resolving symbol values statically. Could not resolve angular2-masonry relative to /home/mateus_luna/Projeto-Salic/src/app/app.module.ts., resolving symbol AppModule in /home/mateus_luna/Projeto-Salic/src/app/app.module.ts, resolving symbol AppModule in /home/mateus_luna/Projeto-Salic/src/app/app.module.ts

ERROR in /home/mateus_luna/Projeto-Salic/src/app/app.module.ts (9,31): Cannot find module 'angular2-masonry'.)

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve 'angular2-masonry' in '/home/mateus_luna/Projeto-Salic/src/app'
 @ ./src/app/app.module.ts 18:0-49
 @ ./src/main.ts
 @ multi ./src/main.ts

i installed it via npm install angular2-masonry --save, which works, now I have "angular2-materialize": "^6.7.1" in my dependencies.

And loaded in my app.module just as described in the docs:

import { MasonryModule } from 'angular2-masonry';

...

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    ShareButtonsModule.forRoot(),
    AlertModule.forRoot(),
    DropdownModule.forRoot(),
    ButtonsModule.forRoot(),
    CollapseModule.forRoot(),
    PaginationModule.forRoot(),
    MasonryModule
]

is there anything else that I'm missing? I did everything from the Readme, except for the System.js part, as I'm using Webpack.

My versions:

@angular/cli: 1.0.0-beta.31
node: 7.4.0
os: linux x64
@angular/cli: 1.0.0-beta.31
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/compiler-cli: 2.4.10
@angular/core: 2.4.10
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10

I'm sorry if it's a dumb question, I'm pretty new on Angular2 :P

Server side errors with Angular Universal

( window, function factory( Outlayer, getSize ) {
^

ReferenceError: window is not defined

angular2-masonry won't compile under Angular 5

Angular 5 has stricter Typescript compilation configurations and will not compile:
node_modules/angular2-masonry/index.ts
The error is:
ERROR in ./node_modules/angular2-masonry/index.ts
Module build failed: Error: myapp/node_modules/angular2-masonry/index.ts is not part of the compilation output. Please check the other error messages for details.

This type script file is incorrectly packed in angular2-masonry according to the Angular team.
You should not package uncompiled .ts files in packages because it can compile diffferently under different configs.
Angular plans to make it even harder for you to use this bad practice in the future. YOur package is already broken for Angular 5.
Here's an Angular team member saying this: angular/angular-cli#8284
( see filipesilva 's comment )

Weird white space when not using ng-for

       <masonry [options]="myOptions" (layoutComplete)="doStuff($event)">
        <div class="panel-sizer"></div>
        <masonry-brick class="panel panel-width-20">
          heyeyeye
        </masonry-brick>
        <masonry-brick class="panel panel-width-20">
          heyeyeye
        </masonry-brick>
      </masonry>

 .panel-sizer{
  width: $size-unit;
}

.panel {
  margin-top:$buffer;
  height: 200px;
  background-color: #01ff70;
}

.panel-width-20 {
  width: calc(20% - #{$buffer});
}

When not using NG-for it gives me leading white space the size of the squares

Using the reloadItems function

Hi,
i am using the masonry grid in an angular 4 project and am adding more items when the user scrolls. Most of the times it is working, but sometimes it seems that not all new items get added to the layout correctly. I use a counter to make sure that all items have been added to the layout before allowing to load more items through scrolling to prevent issues with "cannot remove node" that are also mentioned here in the forum.

ngAfterViewInit() {
   // gets called for every object
   this.masonry.layoutComplete.subscribe((items) => {
     this.itemsAddedToLayout++;
  });
}

...

@HostListener("window:scroll", [])
onWindowScroll(event) {
  if (this.itemsAddedToLayout >= this.itemsToLoad
     && window.scrollY > document.body.offsetHeight - window.innerHeight - 300) {
     this.addMoreProducts();
   }
}

Also what items are shown can be changed by the user through various filtering options.

Therefore I thought one possible solution might be to use the reloadItems() function by the original script, but I don't know how I can access it since it does not seem to be supported by this port of the masonry script.

Any hints or pointers in the right direction would be greatly appreciated.

ORIGINAL EXCEPTION: Failed to execute 'removeChild' on 'Node

Basically I am creating ui components that are been included to container components.
Here is the setup:

<masonry [options]="{ transitionDuration: '0.8s', gutter: 10 }" [useImagesLoaded]="true">
  <app-card [item]="item" *ngFor="let item of items"></app-card>
</masonry>

the app-card contains the

When I do an *ngFor in the
<app-card [item]="item" *ngFor="let item of items"></app-card>

The bricks appear all overlapping. And my console shows the follow errors.

template:0:1 caused by: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
ErrorHandler.handleError @ vendor.bundle.js:64500
vendor.bundle.js:64502 ORIGINAL EXCEPTION: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
ErrorHandler.handleError @ vendor.bundle.js:64502
vendor.bundle.js:64505 ORIGINAL STACKTRACE:
ErrorHandler.handleError @ vendor.bundle.js:64505
vendor.bundle.js:64506 Error: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at AngularMasonry.add (http://localhost:4200/vendor.bundle.js:37119:41)
    at AngularMasonryBrick.ngAfterViewInit (http://localhost:4200/vendor.bundle.js:52357:22)
    at CompiledTemplate.proxyViewClass.View_CardComponent0.detectChangesInternal (/AppModule/CardComponent/component.ngfactory.js:298:78)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:92130:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:92325:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:92115:18)
    at View_HomeComponent1.detectChangesInternal (/AppModule/HomeComponent/component.ngfactory.js:30:19)
    at View_HomeComponent1.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:92130:14)
    at View_HomeComponent1.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:92325:44)
    at ViewContainer.detectChangesInNestedViews (http://localhost:4200/vendor.bundle.js:92462:37)
    at CompiledTemplate.proxyViewClass.View_HomeComponent0.detectChangesInternal (/AppModule/HomeComponent/component.ngfactory.js:705:16)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:92130:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:92325:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:92115:18)
    at CompiledTemplate.proxyViewClass.View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:29:19)
ErrorHandler.handleError @ vendor.bundle.js:64506

Alternative for this dead project

Hello,

Does anyone know any good alternative for this one(what is working?)? Unfortunately I have a lot problems with it... and as I see I'm not alone with those problems, so basically if anyone else have found any usable tool like this (putting things nicely together and sort left to right...) please share it!
+1: if anyone noticed the problem when you use useImagesLoaded and the masonry mess your original sort in ngFor... it is really annoying (next to other banch of annoying things..)
here is the stackowerflow question about this:
https://stackoverflow.com/questions/46349987/angular-2-masonry-alternative

thank you!

Prepended elements are considered as appended

When prepending (unshift) an element to the ngFor array the method _msnry.appended is called (instead of prepended) resulting in the item being at the bottom.

Maybe in AngularMasonryBrick component on ngAfterViewInit there could be a check to see if this._element is this._parent._msnry.items[0] and this._parent._msnry.items.length > 1 then it would be prepended

Error loading in library

Thank you for doing this!

I followed the directions to load this in, and I'm getting errors about Unexpected token, and I don't really understand why. I'm using Typescript with Angular 2.4.9, and loading it in with Webpack:

//=========================================================
//  LOADERS
//---------------------------------------------------------
const loaders = {
  componentStyles: {
    test: /\.scss$/,
    loader: 'raw!postcss!sass',
    exclude: path.resolve('src/common/styles')
  },
  sharedStyles: {
    test: /\.scss$/,
    loader: 'style!css!postcss!sass',
    include: path.resolve('src/common/styles')
  },
  html: {
    test: /\.html$/,
    loader: 'raw'
  },
  typescript: {
    test: /\.ts$/,
    loader: 'ts',
    exclude: /node_modules/
  }
};


//=========================================================
//  CONFIG
//---------------------------------------------------------
const config = module.exports = {};


config.resolve = {
  extensions: ['.ts', '.js'],
  modules: [
    path.resolve('.'),
    'node_modules'
  ]
};

config.module = {
  loaders: [
    loaders.typescript,
    loaders.html,
    loaders.componentStyles
  ]
};

config.plugins = [
  new DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
  }),
  new LoaderOptionsPlugin({
    debug: false,
    minimize: ENV_PRODUCTION
  }),

  // Fix for angular2 critical dependency warning
  // https://github.com/r-park/todo-angular2-firebase/issues/96
  new ContextReplacementPlugin(
    // The (\\|\/) piece accounts for path separators in *nix and Windows
    /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
    path.resolve('src')
  )
];

config.postcss = [
  autoprefixer({ browsers: ['last 3 versions'] })
];

config.sassLoader = {
  outputStyle: 'compressed',
  precision: 10,
  sourceComments: false
};

TypeScript files are still in npm storage

I noticed that *.ts and *.d.ts files are still downloaded with the module itself. It's very annoying because some files are watching for files and stop working if they find something outside root dir.

I would be very grateful if you find a way to handle this issue.

Appending to grid from observable/stream

I'm updating the DOM by streaming an Observable into an array that feeds ngFor directive. I'm having trouble implementing masonry on this, at least with your angular2 module because each time the array changes, masonry.layout is called. Elements are attached but the transition comes from the same place (the start : top left corner). What I want is to append to masonry grid as soon as the element arrives to the stream. Can I achieve this behavior or appending to the grid from a stream is a feature I have to work on ?

Order change via pipe is not detected

Hello,

When I sort my list with a custom pipe, the order is not changed when I use angular2-masonry. Without angular2-masonry, it works.

<masonry>
	<masonry-brick *ngFor="let item of list | sortBy:dynamicProperty">
		<dsv-item [item]="item"></dsv-item>
	</masonry-brick>
</masonry>

Is there a way to make masonry detect these changes?

"main" entry point in package.json file type

"main": "angular2-masonry.js", - is declared in your package.json, however the filename is angular2-masonry.ts

This doesn't seem to be a problem for webpack but when I tried to use your module in a meteor application the discrepancy caused meteors build process to fail.

I'm not sure if it matters whether the package.json changes to *.ts, or the file changes to *.js. For my purposes I changed your package.json to *.ts and I thought I'd let you know.

Thanks for putting this together.

Nothing happens after loading the layout

Hello,

I am new to Angular 2 and I'm trying to use this library for our new app. I'm using it as below , modifying the example given. After everything I don't see any change it in the images. No absolute positioning is applied on the images. Just images aligned vertically with various height and width. Am I missing something?

home.component.ts

import { NgModule, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MasonryModule } from 'angular2-masonry';
import {BrowserModule} from '@angular/platform-browser';


@NgModule({
  imports: [
    MasonryModule, BrowserModule
  ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
  declarations: [ DashboardHomeComponent ],
  bootstrap: [ DashboardHomeComponent ],
})

@Component({
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})

export class DashboardHomeComponent {
	home = true;
}

home.component.html

<masonry>
    <masonry-brick class="brick"><img src='./assets/img/dashboard/1.jpg'></masonry-brick>
    <masonry-brick class="brick"><img src='./assets/img/dashboard/2.png'></masonry-brick>
    <masonry-brick class="brick"><img src='./assets/img/dashboard/3.jpg'></masonry-brick>
    <masonry-brick class="brick"><img src='./assets/img/dashboard/4.png'></masonry-brick>
    <masonry-brick class="brick"><img src='./assets/img/dashboard/5.jpg'></masonry-brick>
    <masonry-brick class="brick"><img src='./assets/img/dashboard/6.jpg'></masonry-brick>
</masonry>

home.component.css

.brick { 
  width: 100px;
  margin: 5px;
  padding: 15px;
}

.brick img {
	max-width: 100%;
}

app.component.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { LayoutComponent } from 'layout/layout.component';

import { HomeComponent } from 'home/home.component';
import { AboutComponent } from 'about/about.component';
import { FeaturesComponent } from 'features/features.component';
import { PricingComponent } from 'pricing/pricing.component';
import { DashboardComponent } from 'dashboard/dashboard.component';
import { DashboardHomeComponent } from 'dashboard/home.component';
import { ProfileComponent } from 'profile/profile.component';
import { DesignComponent } from 'design/design.component';
import { LoginComponent } from 'login/login.component';
import { SignupComponent } from 'signup/signup.component';
import { LogoutComponent } from 'logout/logout.component';

@NgModule({
  declarations: [
    AppComponent,
    LayoutComponent,
    AboutComponent,
    FeaturesComponent,
    PricingComponent,
    DashboardComponent,
    DashboardHomeComponent,
    DashboardProjectComponent,
    DashboardActivityComponent,
    DashboardAssetsComponent,
    DashboardTeamComponent,
    ProfileComponent,
    DesignComponent,
    LoginComponent,
    SignupComponent,
    LogoutComponent,
    HomeComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      { path: 'about', component: AboutComponent },
      { path: 'features', component: FeaturesComponent},
      { path: 'pricing', component: PricingComponent },
      { path: 'dashboard', component: DashboardComponent, children: [
          {
              path: 'home',
              component: DashboardHomeComponent
          },
          {
              path: 'projects',
              component: DashboardProjectComponent
          },
          {
              path: 'activity',
              component: DashboardActivityComponent
          },
          {
              path: 'assets',
              component: DashboardAssetsComponent
          },
          {
              path: 'teams',
              component: DashboardTeamComponent
          },
          {
              path: '',
              redirectTo: 'home', pathMatch: 'full'
          }
      ] },
      { path: 'profile', component: ProfileComponent },
      { path: 'app', component: DesignComponent },
      { path: 'login/{type}', component: LoginComponent },
      { path: 'signup/{type}', component: SignupComponent },
      { path: 'logout', component: LogoutComponent },
      { path: '', component: HomeComponent}
    ], { useHash:false })
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

Init-layout

How manually init Layout in Angular2?

masonry is not a constructor

Hi, i got error with using masonry with angular 2.0 release. The problem is in masonry.ts on line 60:

this._msnry = new masonry(this._element.nativeElement, this.options);

Error message from console:

EXCEPTION: Error in /angular/views/app.html:13:11 caused by: masonry is not a constructor
ORIGINAL EXCEPTION: masonry is not a constructor

TypeError: masonry is not a constructor
    at AngularMasonry.ngOnInit (masonry.ts:60)
    at DebugAppView._View_ChatComponent0.detectChangesInternal (ChatComponent.ngfactory.js:145)
    at DebugAppView.AppView.detectChanges (core.umd.js:9566)
    at DebugAppView.detectChanges (core.umd.js:9671)
    at DebugAppView.AppView.detectViewChildrenChanges (core.umd.js:9592)
    at DebugAppView._View_ChatComponent_Host0.detectChangesInternal (ChatComponent_Host.ngfactory.js:36)
    at DebugAppView.AppView.detectChanges (core.umd.js:9566)
    at DebugAppView.detectChanges (core.umd.js:9671)
    at ViewRef_.detectChanges (core.umd.js:7668)
    at eval (core.umd.js:7089)

in my app.html:

     <masonry>
            <masonry-brick class="brick" *ngFor="let post of posts">
                <!--<post  [post]="post">Component loading...</post>-->
            </masonry-brick>
        </masonry>

Is it bug or what is wrong? Tranks

useImagesLoaded not working

Error while adding brick:

ORIGINAL EXCEPTION: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Seems to happen only when a brick is added before imagesLoaded has called back on the previously added brick.

Don't use useImagesLoaded until solved...

div's over lapping

Hi,

I am using angular2-masonry lib to achieve staggered grid for my web site the issue is when the data is loaded for first time the divs are getting overlapped as shown in this image

When i reload the data the alignment get corrected automatically like this

Could you please help me to solve this issue?

Add ability to handle external actions

Hi. Could you add ability to use public method after external actions? Like here

$grid.on( 'click', '.grid-item', function() {
  // change size of item via class
  $( this ).toggleClass('grid-item--gigante');
  // trigger layout
  $grid.masonry();
});

We use $grid.masonry(); for adapting grid to current state.

Exposing more of masonry

There aren't many exposed masonry methods at the moment. layout(), add(), and remote() is currently the only ones.
I have a use-case where I need to change some masonry options after I have initialized it.
Doing that, and calling layout() wont do it. The only way I've found is calling ngOnDestroy() and ngOnInit() manually; (which feels as dirty as it gets!)

I'm not sure if any of http://masonry.desandro.com/methods.html gives these kind of control. But I think they do.. Is there a good reason _msnry is private? There are a lot of use-cases that needs access to it.

Or is there another good way of reloading it?

Overriding next element if element size change at run time

Overriding next brick/ element if previous brick/element size change at run time.
As Masnory setting top position of every brick/element, If previous element is getting resize its not ad-gusting next brick positions.
Is there any alternative to do this, or I am missing any setting,

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.