CODEWITHSUNDEEP
javascriptarraysangularobject
Mr. Learner
Mr. Learner

Reputation: 1038

Destructuring objects in Javascript - ngbind - Angular 4+

Could someone tell me how to use destructured data in ng-bind in angular 4+?

I've come across how to use destructured object/array from here .

const wes = {
  first: 'Wes',
  last: 'Bos',
  links: {
    social: {
      twitter: 'https://twitter.com/wesbos',
      facebook: 'https://facebook.com/wesbos.developer',
    },
    web: {
      blog: 'https://wesbos.com'
    }
  }
};

Trying to bind the data like below:

let {first : f, last:l}  =wes;

In the html I simply used {{f}},

but it doesn't show anything. Did I understand wrongly ?

Please refer to what I did: stackblitz

Thanks all

Upvotes: 1

Views: 5752

Answers (2)

briosheje
briosheje

Reputation: 7446

You cannot directly use the object destructuring in angular, because it needs to be binded to the component directly.

Taking your sample, you can do something like this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
  count = 5;

  _destructuring = '';  
  ngOnInit() {
    const tmp = {a: 'hello'};
    const {a: _destructuring} = tmp;
    this._destructuring = _destructuring;
  }
}

Updated example: https://stackblitz.com/edit/angular-ngmodel-write-value-er4dcv?file=app/app.component.ts

Alternatively, you might want to use Object.assign on angular component's this. However, this would involve writing far much code than needed, so...

EDIT: as requested, here is the sample code with your original object, and the (working) example: https://stackblitz.com/edit/angular-ngmodel-write-value-lf97lr?file=app/app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular 4';
  count = 5;

  _destructuring = '';
  _nested = {};

  ngOnInit() {
    const tmp = {a: 'hello'};
    const {a: _destructuring} = tmp
    this._destructuring = _destructuring;

    // Original (nested) object
    const wes = {
      first: 'Wes',
      last: 'Bos',
      links: {
        social: {
          twitter: 'https://twitter.com/wesbos',
          facebook: 'https://facebook.com/wesbos.developer',
        },
        web: {
          blog: 'https://wesbos.com'
        }
      }
    };
    // Object destructuring (links.social.facebook -> fb, links.social.twitter -> tw)
    const {
      links: {
        social: {
          facebook: fb,
          twitter: tw
        }
      }
    } = wes;

    // Assign to the local property, available in the component.
    Object.assign(this._nested, {
      fb: fb,
      tw: tw
    });
  }
}

Upvotes: 3

user4676340
user4676340

Reputation:

Well seems to work great :

const person = {
  first: 'John',
  last: 'Doe',
};

const { first, last } = person;
const { first: f, last: l } = person;

console.log(first, last);
console.log(f, l);

Upvotes: 0

Related Questions