Angular 2 – how to update model

I receive data model using a service:

  return this.http.get(queryUrl, opts)   .map((response: Response) => {
    return (<any>response.json()).data.map(el => {
      return new User({
        id: item.id,
        name : item.name
      });
    })   

This gets accesed from component

      makeRequest() {
          this.result = this.myService.loadData()
      }

And passed down as result: Observable<User[]>; to a form, this on Submit sends a post request which gets saved to the backend,all this works. The problem is that my model/website doesn’t get updated this way.

Probably it’s a silly question but, how do I update my model (now after saving to backend the app still holds the old data)? What ar the strategies? Do I have to pass updated data object back to top component and then update?


Source: stackoverflow-javascript

set a column property as the first element of a nested array in ngx-data-table

<ngx-datatable
class='material'
[columnMode]="'force'"
[sortType]="'multi'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="10"
[rows]='rows'
[selected]="selected"
[selectionType]="'cell'"
(select)="onSelect($event)"
(activate)="onActivate($event)">
 <ngx-datatable-column name="Gender" [width]="80" prop="resource.gender"></ngx-datatable-column>
 <ngx-datatable-column name="First Name" [width]="80" prop="resource.name[0].text"></ngx-datatable-column>

The last column does not work in my example above, because i cannot specify the first element of a nested array in my json. Without flattening my json is there another trick to do this?

ideally if i could say prop = name.first.text it would work but no such first method exists.


Source: stackoverflow-javascript

Angular – How do directives "see" template & ViewContainer?

I have a simple component which injectes nunbers after a delay via custom directive named *appDelay

I already know that * is a hint for Angular to de-sugar the syntax into something like

<ng-template ...>
...actual markup
</ng-template>

I also know that we can Inject components/templates to the viewContainer via :

  this.viewContainerRef.createEmbeddedView/Component(this.templateRef);

The directive code is :

@Directive({
  selector: '[appDelay]'
})
export class DelayDirective {
  constructor(
    private templateRef: TemplateRef<any>,private viewContainerRef: ViewContainerRef
  ) {  }

  @Input() set appDelay(time: number): void {
    setTimeout(()=>{
      this.viewContainerRef.createEmbeddedView(this.templateRef);
    }, time);
  }
}

The docs states :

To access a ViewContainerRef of an Element, you can either place a
Directive injected with ViewContainerRef on the Element, or you obtain
it via a ViewChild query.

Question:

In a general pseudo form : What are the template “string values” for templateRef and viewContainerRef ?

IMHO the de-sugared template would be something like :

<ng-tempalte ...>
   <card *appDelay="500 * item">
        {{item}}
   </card>
</ng-template>

So the ViewContainerRef would be a reference to <ng-tempalte ...>

And the templateRef will be a reference to the <card >...</card>

— Am I right ?

(Also , is it possibe to console.log() those HTML templates and see the actual markup ?


Source: stackoverflow-javascript

angular 4 project with custom html theme

I am trying to create a angular 4 project from angular cli and I am trying to import a custom html theme.Theme has and css files js files and some font files. Where put all those files?? in asset folder?? And after that I will import them in index.html as script and links? With that way I am getting some errors “can’t resolve the dependencies” like fonts.Exist other way more efficient and “more right” for the angular standards like through angular-cli.json or something else??
I have searched everywhere how I do this but no luck.


Source: stackoverflow-javascript

How to loop through array with arrays/objects and assign properties new values in Angular?

I have an array of arrays and objects. I have a function whereI want to assign a value to a property (so for example ‘call’:” of $scope.companies[0].users becomes whatever value the user checks in the checkbox). I researched it and I just don’t know how to do that and everything I did so far is wrong. Thanks a lot!!

      <form action="" ng-click="change(key)">
        <input ng-model="key.call"type="checkbox"">Call
        <br>
        <input ng-model="key.person"type="checkbox" >Person
        <br>
        <input type="checkbox"ng-model="key.dial">Dial
        <br>
        <input type="checkbox" ng-model="key.voice">Voice          
    </form>

app.controller('appCtrl', function($scope) {
    $scope.companies = [{
        name: 'The Best Company Denim',
        users: [{
            firstName: 'Alex',
            lastName: 'D',
            number: 1234,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'Sarah',
            lastName: 't',
            number: 14,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'J',
            lastName: 'd',
            number: 07,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }]
    }, {
        name: 'The Best Company Elegant',
        users: [{
            firstName: 'Alx',
            lastName: 'B',
            number: 1234,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'Seth',
            lastName: 'w',
            number: 12,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'J.S',
            lastName: 'B',
            number: 7.
            call: '',
            person: '',
            dial: '',
            voice: ''
        }]
    }, {
        name: 'The Best Company by Julia',
        users: [{
            firstName: 'Aleddddx',
            lastName: 'l',
            number: 1234,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'Maggy',
            lastName: 'n',
            number: 1,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }, {
            firstName: 'Ja',
            lastName: 'Key',
            number: 123,
            call: '',
            person: '',
            dial: '',
            voice: ''
        }]
    }]

    $scope.change = function(key) {
        for (var i = 0; i < $scope.companies[0].users; i++) {
            $scope.companies[0].users[i].call: key)
    }
}
});


Source: stackoverflow-javascript

Building a Filter Function to Assign Values by Type in Angular App

I have a series of checkbox filters in my Angular app, that when clicked on by a user in the view, should trigger functionality that queries the API to return filtered results. I have these filters working when used one at a time. However, I’m having difficulty figuring out how to structure the function so that it can hold ALL currently selected filters. The function call makes use of a Mongoose/MongoDB feature that lets us pass key/value pairs that correspond to fields directly into the payload of a post request.

This is what I initially had (that works, but only by handling one filter at a time via if/else statements). It basically says, if the “type” is of “lan”, then assign value accordingly. And if no value is provided (i.e. the user has de-selected all filters), then just send an API call request without including any inputed parameters (the last “else” here):

    onFilterReceived(value, type) {
        if (type === 'lan' && value) {
            this.filtersService.getByFilter(this.page, this.pagesize, {
                "services.workflow.status" : "consulting",
                "languages.primary" : { $in: value }
                });
        } else if (type === 'zip' && value) {
            this.filtersService.getByFilter(this.page, this.pagesize, {
                "services.workflow.status" : "consulting",
                "zipCode" : { $in: value }
                });
        } else {
            this.filtersService.getByFilter(this.page, this.pagesize, {
                "services.workflow.status" : "consulting"
            });
    }

I am getting both “value” and the corresponding “type” sent via Angular’s Output() and EventEmitter(), like this:

        <list [records]="records"
            (sendLanguage)="onFilterReceived($event, type = 'lan')"
            (sendZipcode)="onFilterReceived($event, type = 'zip')">
        </list>

Again, all of the above works as is.

However, what I’m trying to do is build this function is such a way that, when the value received is of type “lan”, that the corresponding “value” in that case is applied to “value” here:

"languages.primary" : { $in: value }

And then when the value received has a corresponding type of “zip”, that “value” is then applied to “value” here:

"zipCode" : { $in: value }

The end goal being that I will be able to send a request over the API that holds the values of multiple filters AT THE SAME TIME.

I’ve tried numerous formulations, but so far have been unable to get this to work as desired. I’ve been using ‘if/else’ statements, like above, but again, that will only allow me to hold a value from one filter at a time. How could I make sure I’m passing each of the currently selected filter values?

If someone could provide even a basic example of how to formulate this kind of logic, it’d be very helpful.


Source: stackoverflow-javascript