Utilize Property Binding to Access the Map

Question

Utilize Property Binding to Access the Map

I am struggling to extract a value from a Map and use it as the background color of a div element, but I can't seem to get it right. My syntax seems off. What mistake am I making?

<div [style.background-color]="bgcolor" width="50px" height="50px"> Hello Green</div>
<div [style.background-color]="bgcolors['a']" width="50px" height="50px"> Hello Red</div>

Within my component, this is what I have:

 bgcolor= "green";
 bgcolors:  Map<string,string>;
 bgcolors = new Map<string,string>();
 bgcolors.set("a", "red");

Check out this jsfiddle link. The first one works while the second one does not.

angular typescript

Answer 1

Answer №1

Check out the solution below. Make sure to use bgcolors.set() properly and access items in Map using bgcolors.get(key).

let { Component, NgModule } = ng.core;

@Component({
  selector: 'my-app',
  template: `
    <div [style.background-color]="bgcolor" width="50px" height="50px"> Hello Green</div>
    <div [style.background-color]="bgcolors.get('a')" width="50px" height="50px"> Hello Red</div>
  `,
})
class HomeComponent {
    bgcolor= "green";
    bgcolors:  Map<string,string>;
    bgcolors = new Map<string,string>();

    name = 'Angular 2';
    constructor() {
        this.bgcolors.set("a", "red");
    }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);

Answer 2

Check out the solution below. Make sure to use bgcolors.set() properly and access items in Map using bgcolors.get(key).

let { Component, NgModule } = ng.core;

@Component({
  selector: 'my-app',
  template: `
    <div [style.background-color]="bgcolor" width="50px" height="50px"> Hello Green</div>
    <div [style.background-color]="bgcolors.get('a')" width="50px" height="50px"> Hello Red</div>
  `,
})
class HomeComponent {
    bgcolor= "green";
    bgcolors:  Map<string,string>;
    bgcolors = new Map<string,string>();

    name = 'Angular 2';
    constructor() {
        this.bgcolors.set("a", "red");
    }
}

const { BrowserModule } = ng.platformBrowser;

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HomeComponent ],
  bootstrap:    [ HomeComponent ]
})
class AppModule { }

const { platformBrowserDynamic } = ng.platformBrowserDynamic;
platformBrowserDynamic().bootstrapModule(AppModule);

Utilize Property Binding to Access the Map

Answer №1

Similar questions

Alert: an issue has been detected in the file located in the directory node_modules/pdfjs

I'm curious if it's possible to set up both Tailwind CSS and TypeScript in Next.js during the initialization process

Having trouble with 'npm <script-command>' not working? Try changing it to 'npm run-script <script-command>' instead

Angular 2's Multi-select dropdown feature allows users to select multiple options

Terminal displays Typescript variable syntax error

What could be causing my code to not run after subscribing to the observables?

Having trouble showing the fa-folders icon in Vuetify?

Angular does not support custom validation as effectively as other frameworks

Error: Unable to install Angular on WSL due to permission denied for Node

Tips for typing a narrow JSX.Element

Using NavParams within a service component,

Tips on deactivating a div when a checkbox is selected

The module '@angular/core' could not be located in the '@angular/platform-browser' and '@angular/platform-browser-dynamic' directories

Angular is experiencing difficulty locating the routing path for the auxiliary `router-outlet`

What steps can I take to ensure that the elements are in the same row instead of being displayed in three separate rows?

Managing startup errors in Angular 2

The SortKey<> function is ineffective, even though the individual types it uses work perfectly fine

How to utilize *ngFor alongside the async pipe for conditional rendering in Angular 8 HTML

The where clause in the Typeorm query builder instance is not functioning properly after its common usage

SmartEdit functions properly when spartacus is running using yarn start --ssl, but does not work without SSL enabled