seat map airplane reservation using angular-CodePudding

I need help. the seat should change color (added, removed the class). I don't know how to do it in angular. Here is my solution with JS https://codepen.io/mateuszcieslik/pen/mdpLqgw I have one component with airplane.

I am asking for tips or a solution. I am new to Angular and It. I've already searched google and can't find a helpful topic.

The code looks like this:

<li >
              <ol  type="A">
                  <li >
                      <input type="checkbox"  id="1A" />
                      <label for="1A">1A</label>
                  </li>
                  <li >
                      <input type="checkbox"  id="1B" />
                      <label for="1B">1B</label>
                  <li >
                      <input type="checkbox"  id="1C" />
                      <label for="1C">1C</label>
                  </li>
                  <li >
                      <input type="checkbox"  id="1D" />
                      <label for="1D">1D</label>
                  </li>
              </ol>
          </li>

And embraraer.ts

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

@Component({
  selector: 'app-embraer',
  templateUrl: './embraer.component.html',
  styleUrls: ['./embraer.component.scss']
})
export class EmbraerComponent implements OnInit {

  title__seatList: string = 'Wybór Miejsca'
  nextButton: string = 'Next';
  reservationButton: string = 'Reservation';

  dataSource:any = [];

  constructor() { }

  ngOnInit(): void {
  }

  onAddSeat(){
    this.dataSource.push(this.dataSource.length);
  }

}

CodePudding user response：

I think you have many ways that you could solve your issue of adding/removing a CSS class.

NgClass (IMO the easiest method)

You could create a component that represents the seat, define ngClass, and click event handler then toggle the class like this:

seat.component.ts

@Component({
    selector: 'app-seat',
    templateUrl: './seat.component.html',
    styleUrls: ['./seat.component.css']
})
export class SeatComponent {
    public isSelected: boolean = false;
    @Input() id: string;

    public handleClick($event: MouseEvent): void {
        this.isSelected = !this.isSelected;
    }
}

seat.component.html

<div  [ngClass]="{'selected': isSelected}" 
  [id]="id" (click)="handleClick($event)"
>
    {{id}}
</div>

seat.component.css

.seat {
  // details for seat styling
}

.seat .selected {
  // style change for when selected
}

it would change how you are using it in your main template, something like this

airplane.component.html

<li >
    <ol  type="A">
        <li >
            <app-seat [id]="1A"></app-seat>
        </li>
        <li >
            <app-seat [id]="1B"></app-seat>
        <li >
            <app-seat [id]="1C"></app-seat>
        </li>
        <li >
            <app-seat [id]="1D"></app-seat>
        </li>
    </ol>
</li>

Renderer2

You can inject a reference to Renderer2 and call methods on it to modify the classes on your native element reference.

See https://www.tektutorialshub.com/angular/renderer2-angular/

Which would be something like

class SeatComponent {

    private selected: boolean = false;

    constructor(private renderer: Renderer2, private el: ElementRef) {
    }

    clickHandler($event: MouseEvent): void {
        this.selected = !this.selected;

        if (this.selected) {
            this.renderer.addClass(this.el.nativeElement, 'selected');
        } else {
            this.renderer.removeClass(this.el.nativeElement, 'selected');
        }
    }
}

Native DOM manipulation

You can inject a ElementRef (which will give you a reference to your component's ElementRef). Which would look something like this (to be honest, I'm not positive on syntax here):

class SeatComponent {
    constructor(private el: ElementRef) {
    }

    clickHandler($event: MouseEvent): void {
        if (this.el.nativeElement.styleClasses.selected) {
            this.el.nativeElement.styleClasses.push('selected');
        } else {
            delete this.el.nativeElement.styleClasses.selected;
        }
    }
}

CodePudding user response：

Thank you for your help. I did according to the first method. I created the seat component. and I imported and exported seat.component in main.module.ts

I have errors in the html airplane, e.g.

"Parser Error: Unexpected token 'A' at column 2 in [1A]"

VSC highlights id and 1A

<li >
                  <app-seat [id]="1A"></app-seat>
              </li>

in main.module I imported and exported seat.component