in angular2 how can we put/set object property and update like color

Question

Above is template i am note able to set note.color=color.color and update note how can we do

Below is html code how note is unable to update as color change:::

<div class="card card-1" *ngFor="let note of notes" style="background:note.color">
    <div style=" background:note.color;margin10px ">
        <img [src]="pinImg" alt='Pin' (click)="pinUnpin(note,true)" />

        <mat-form-field>
            <input contenteditable="true" matInput [(ngModel)]="note.title">
        </mat-form-field>

        <mat-form-field>
            <input contenteditable="true" matInput [(ngModel)]="note.body">
        </mat-form-field>
        <br>
        <div>

            <img [src]="archiveImg" alt='Archive' (click)="archiveUnarchive(note,true)" />
            <img style="width: 15px" [src]="trashImg" alt='Archive' (click)="trashUntrash(note,true)" />
            <ng2-dropdown>
                <ng2-dropdown-button>
                    <img [src]="colorPalet" alt='color palete' />
                </ng2-dropdown-button>
                <ng2-dropdown-menu>
                    <ng2-menu-item *ngFor="let color of colors">

                        <a (click)="updateNote(note)">
                            <img src="{{color.path}}" alt="{{color.color}}" (click)="note.color=color.color ; updateNote(note)" />
                            <!-- click="note.color=color.color" -->
                        </a>
                    </ng2-menu-item>
                </ng2-dropdown-menu>
            </ng2-dropdown>
            <button mat-button class="donebtn" style="width:100px" (click)="updateNote(note)">DONE</button>
        </div>
    </div>
</div>

above is html code how note is unable to update as color change:::

use a method instead. what error you are getting? suggessting you to add code instead of screenshot. — Aravind, Jan 15 '18 at 09:52
we don't like your screenshot. please show your code instead screenshot — Imran, Jan 15 '18 at 09:55
@Aravind i am not getting any error.. I want to set note color and then update that note ;also i wanted to set note background color .. — Ragini Patil, Jan 15 '18 at 10:50

score 1 · Answer 1 · answered Jan 15 '18 at 10:18

1

Don't need two click methods for same node

Your question is not clear. But I think it's conflicted your two click methods Try:

<a (click)="note.color=color.color ; updateNote(note)">
   <img src="{{color.path}}" alt="{{color.color}}"  
<a/>

Note: make sure that you don't update color value in your updateNote() method

answered Jan 15 '18 at 10:18

Imran

3,031
4
25
41

iam just setting note colour and then giving that note to updateNote(note) method @Imran – Ragini Patil Jan 15 '18 at 10:49
@RaginiPatil can you try `` for test that you can change your color without `updateNote(note)` method. If its ok then fix your `updateNote(note)` method – Imran Jan 15 '18 at 11:05
note is getting updated in backend now thanks ,just not able to set background color – Ragini Patil Jan 15 '18 at 11:22
– Ragini Patil Jan 15 '18 at 11:26
@RaginiPatil you should fix your own. If you cant even try let me know. But try first – Imran Jan 15 '18 at 11:29
updateNote(note){ console.log("in update note!!!"); this.noteService.updateNote(note) .subscribe( data => { console.log("note updated "); this.getAllNotes(); }, error => { console.log(error); this.alertService.error(error); this.getAllNotes(); }); } – Ragini Patil Jan 15 '18 at 11:30
this is how im setting color – Ragini Patil Jan 15 '18 at 11:32
you can try like this. add a parameter in `updateNote` like `updateNote(note , color) { note.color = color.color ........` so dont need `note.color=color.color ;` code in your click method. And your `style="background:note.color"` code should not work try [this](https://stackoverflow.com/a/41974490/1379347) – Imran Jan 15 '18 at 11:45
@RaginiPatil stackoverflow is not coding service. You should ask your specific problem here – Imran Jan 15 '18 at 11:46
i tried all this method since yesterday ,dint reflect so i felt to ask ;you can get from commented lines and screenshot ,well thanks for help – Ragini Patil Jan 15 '18 at 11:53

score 1 · Answer 2 · edited Aug 27 '18 at 13:22

1

[style.background]="note.color" ---> to set background color of card/note

To set note.color:::

<a (click)="updateNote(note)">
    <img src="{{color.path}}" alt="{{color.color}}" (click)="note.color=color.color " />
</a>

edited Aug 27 '18 at 13:22

Sanoj_V

2,936
1
12
28

answered Jan 15 '18 at 11:57

Ragini Patil

109
1
13

Great. Finally you can fix it – Imran Jan 15 '18 at 12:05

in angular2 how can we put/set object property and update like color

2 Answers2