Question

116

does angular have the computed property feature like in vue.js?

rated 0 times [ 122] [ 6] / answers: 1 / hits: 42666 / 7 Years ago, sun, april 30, 2017, 12:00:00

I learnt Vue.js first, and now have a project in Angular 4 so I just learnt Angular. I find everything is not that different from Vue except the Computed Property. In Vue, I can create a computed property that listens to changes of other properties and run calculations automatically.

For example(in Vue 2):

computed: {

    name(){

        return this.firstname + ' ' + this.lastname;

    }

}

The name property will only recalculate when one of firstname or lastname change. How to handle this in Angular 2 or 4 ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hallie

Add To Favorites

Follow

Total Points: 503

Total Questions: 114

Total Answers: 103

Location: Iraq

Member since Fri, Jun 5, 2020

4 Years ago

hallie questions

1 Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

Fri, Jan 28, 22, 00:00, 2 Years ago

1 isSameOrBefore implementation for date-fns

Fri, Jul 9, 21, 00:00, 3 Years ago

1 Module build failed when using mini-css-extract-plugin with postcss-loader for less

Thu, May 27, 21, 00:00, 3 Years ago

1 d3.js in Angular - Property 'event' does not exist on type 'typeof import

Wed, Nov 11, 20, 00:00, 4 Years ago

1 Uncaught SyntaxError: Unexpected token '< ' VueJS PWA

Fri, Mar 27, 20, 00:00, 4 Years ago

View All

answered 7 Years ago leiaf · Accepted Answer

yes, you can.

In TS file:

export class MyComponent {



  get name() {

     return  this.firstname + ' ' + this.lastname;

  }

}

and after that in html:

<div>{{name}}</div>

here is an example:

@Component({

  selector: 'my-app',

  template: `{{name}}`,

})

export class App  {

  i = 0;

  firstN;

  secondN;



  constructor() {

    setInterval(()=> {

      this.firstN = this.i++;

      this.secondN = this.i++;

    }, 2000);

  }

  get name() {

    return  this.firstN + ' ' + this.secondN;

  }

}