angular/angular

Discussion for angular (2+) - need help? create a stackblitz with your issue to get help faster using this template: https://stackblitz.com/fork/angular-issue-repro2

Daniel

@gaiottino

import {Component} from 'angular2/core'

@Component({
  selector: 'gridifier',
  template: `
    <div class="gridifier">
      <ng-content></ng-content>
    </div>
  `
})
export class Gridifier {
  ngOnInit() {
    var grid = new (<any>window).Gridifier($('.gridifier'), {
      query: '> div',
      dragifier: true
    })
    grid.append(grid.collectNew())
  }
}

How should I rewrite the above component to get rid of $('.gridifier')? Not sure what the best practice is when wrapping a jQuery plugin like that.

James Pacileo

@jamespacileo

do you mean document.getElementByClassName('gridifier')?

Daniel

@gaiottino

Well that's more or less the same. Direct access to the DOM. I wanted something similar to ElementRef but not sure that's what I should use... it has a big red warning box ;)

Eric Martinez

@ericmartinezr

@gaiottino

@Component({
  selector: 'gridifier',
  template: `
    <div class="gridifier" #gridifier>
      <ng-content></ng-content>
    </div>
  `
})
export class Gridifier {
  @ViewChild('gridifier') gridifier;
  ngOnInit() {
    var grid = new (<any>window).Gridifier(this.gridifier.nativeElement, {
      query: '> div',
      dragifier: true
    })
    grid.append(grid.collectNew())
  }
}

Daniel

@gaiottino

Ah. There's an annotation I've not seen yet. Thanks. Gonna head over to the docs :)

@ericmartinezr get an error Cannot read property 'nativeElement' of null. Tried inside ngAfterViewInit as well but same result

Eric Martinez

@ericmartinezr

make a plnkr

@gaitottino Oh, yeah, it must be on ngAfterViewInit http://plnkr.co/edit/Pm268dYmQ6lu9BvPH6kr?p=preview

Daniel

@gaiottino

ah. and #gridifier. Thanks

AngryPowman

@AngryPowman

Hey guys, is there angular material suitable for desktop app development?

Daniel

@gaiottino

@ericmartinezr how would I update that gridifier to run once ng-content changes? If the contents are rendered from a promise

Vlado Tesanovic

@vladotesanovic

@AngryPowman take a look on this example https://github.com/auth0/angular2-electron

Daniel

@gaiottino

Ok. So I found ngAfterContentChecked. But moving grid.append(grid.collectNew()) there just seems to call ngAfterContentChecked in an infinite loop. :-/

AngryPowman

@AngryPowman

@vladotesanovic Thanks, I am using electron for my solution with AngularJS, and now i am looking for an UI framework which is best for it.

choeller

@choeller

Hi guys! I'm just having kind of a mental problem understanding the basics of Observables... So my question basically boils down to one thing: So in this Rx.js world we have an Observable that represents the datasource. Now I can subscribe an Observer to that Observable - so in my understanding the Observer is the function that I pass to the "subscribe"-method... is that correct? If so, I just dont get this syntax:

Observable.create((observer) => {
      observer.next(5);
      observer.next(10);
    })

Why is the "thing" that emits the new values the observer?! can anyone put that in simple words for an rxjs newbie? :grimacing:

@gaiottino did you already try ngAfterContentInit?

I think ngAfterContentChecked is called every time change detection runs...

Daniel

@gaiottino

@choeller since the content is updated async, the child elements werent available in ngAfterContentInit but i think I might have to make a service from it.

It seems that ngAfterContentChecked is being triggered excessively when a mouse listener is active. hmm.

Aleš

@fxck

https://egghead.io/series/introduction-to-reactive-programming watch these @choeller

it's from this guy https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

choeller

@choeller

@gaiottino hmm, I see... do you have a plnkr of that?

@fxck I already watched it :grimacing: I guess I understand most of it, but what I still really don't get is that Observable.create() syntax

Daniel

@gaiottino

Is this a bug? Mouse move the red square. Should check be done all the time? Makes using external libs that listen to mouse movements more or less unusable. http://plnkr.co/edit/btcVt7K9zIxaAxJrQ2ef?p=preview

ROne

@ravi-mone

Hello Team,
For me 'Batarangle' debbuger tool is not working, I am using ubuntu machine

Do any body have suggestions of other debuggers if any

Ricardo Reis

@rjmreis

@choeller thats an arrow function, new in ES6

Eric Martinez

@ericmartinezr

@gaiottino is not a bug, it's just the change detector doing its job. The same happens with ngAfterViewChecked. When you listen to an event it has to assume you're changing something, so it runs part of the lifecycle hooks to check it.

ROne

@ravi-mone

@ericmartinezr , can you please give the order of execution of life cycle hooks of component and route hooks , some thing as explained with angular1
http://stackoverflow.com/questions/20663076/angularjs-app-run-documentation

Eric Martinez

@ericmartinezr

I don't know the exact order. Just put a console log in each one and you'll see it

ROne

@ravi-mone

I am going through the documents, but little confusing,

where one or more of the hooks seems like performing same task

Not a bad idea, I will do that console one, thanks

Oleg Korsak

@kamikaze

looks like router has a problem in angular2

please help. Open this site: http://market.bixority.com/ and see that upper "Sign up" link works fine and inner Signu up link doesn't

but... if you will open debugger in browser

and place breakpoint in router.js -> RouterLink.set function

and then will just press "continue"

(for 2 times as I know)

the link will become fine and clickable

the same problem occurs when you place this link into signin-page body directly

any ideas?

James Pacileo

@jamespacileo

Hey guys, just wanted to drop a line... I LOVE ANGULAR 2! whheeeeee!! :smile:

Daniel

@gaiottino

@ericmartinezr but it doesn't trigger on mousemove all the time and the. Why does Angular assume I want to take action when the listening is done by an external script?

Eric Martinez

@ericmartinezr

because afaik jquery registers events using addEventListener

Brandon

@brandonroberts

@kamikaze I don’t see any of your links working inside the route. What’s your route config and routerLink look like?

Alexander Wieser

@crystalbyte

Is there a way to catch a 404 error when using http.get ? I tried using observable.catch(...), unfortunately it is never invoked ?

Eric Martinez

@ericmartinezr

@crystalbyte just add an error function to catch the error.

http.get('...').subscribe(res => ..., err => /* reaches here when there's some error */)

@crystalbyte I've this plnkr http://plnkr.co/edit/IST6Z8sK062ZbldPMpBO?p=info

Alexander Wieser

@crystalbyte

@ericmartinezr Simple enough, thanks ;)

Where communities thrive

People

Repo info

Activity