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

@Component({
  selector: 'world', // Name of the html tag
  providers: [], // Services
  styleUrls: [], // Url of the styles
  templateUrl: './world.component.html'
})
export class WorldComponent {

}

<li *ngFor="let enemy of enemies">
</li>
<enemy *ngIf="hasLife">
</enemy>

<div [ngClass]="['bold-text', 'green']"></div>
<div [ngClass]="'italic-text blue'"></div>
<div [ngClass]="{'small-text': true, 'red': true}"></div>

import { Injectable } from '@angular/core';

@Injectable()
export class BlockService {

  getCoins() { 
    return 100; 
  }
}

import { Pipe } from '@angular/core';
import { PipeTransform } from '@angular/core';
@Pipe({name: 'filterReviewByStatus'})
export class FilterReviewByStatusPipe implements PipeTransform {


}

import { Component } from '@angular/core';
import { BlockCoins } from './blockCoins.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: 'BlockCoins'
})

export class AppComponent {
    constructor (private blockCoins: BlockCoins) {
    }

}

export class AppComponent {
    constructor (private blockCoins: BlockCoins) {
    }
}

<button (click)="jump()"></button>

<world [name]="worldName"></world>

export class AppComponent {
    worldName = 'World 1-1';
}

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

export class WorldComponent {
    @Input()
    private name: string;
}

<h1>{{name}}</h1>

<world [name]="worldName" (changeName)='changeWorld($event)'></world>

export class AppComponent {
    worldName:string = 'World 1-1';

    changeWorld(name: string) {
        this.worldName = name;        
    }
}

import {Component, Input, Output, EventEmitter} from '@angular/core';

export class WorldComponent {
    @Input()
    private name: string;

    @Output()
    changeName = new EventEmitter<string>();

    click(level) {
        this.changeName.next(level);
    }
}

<h1>{{name}}</h1>
<button (click)='click("World 1-2")'>Next level</button>

<a [routerLink]="/world1"></a>

 <app-character name="chamod" (removeGoomba)="removeGoomba($event)" name="chamod" style="background-color:lightblue;display:block"></app-character>
    <app-character name="suresh" (removeGoomba)="removeGoomba($event)" name="suresh" style="background-color:lightgreen;display:block"></app-character>

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Angular - Standalone</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a [routerLink]="['/home']">Home</a></li>
      <li><a [routerLink]="['/srilanka']">Lets Play</a></li>
    </ul>
  </div>
</nav>
<div class="container">
  <router-outlet></router-outlet>
</div>

ng g s vote

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class VoteService {
   votes = 0;
  constructor() { }

  getVotes() {
    return this.votes;
  }

  setVoters(vote : number){
     this.votes = +1;
  }
}

<ul class="collection"> 
    <li   class="collection-item avatar">   
      <img *ngIf="name == 'suresh'" src="assets/mario.png" alt="" class="circle">
      <img *ngIf="name == 'chamod'" src="assets/luigi.png" alt="" class="circle">
      <span class="title">it is me! {{name}}, votes: {{votes}}</span>   
    </li>
  </ul>
  <input type="number" #goombaId/>
  <button class="btn waves-effect waves-light green accent-3" (click)="crushGoomba(goombaId.value)">Jump over</button>

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { VoteService } from '../vote.service';

@Component({
  selector: 'app-character',
  imports: [CommonModule],
  templateUrl: './character.component.html',
  styleUrl: './character.component.scss'
})
export class CharacterComponent {

  votes = 0;
  @Input() name!: string;

  @Output()
  removeGoomba = new EventEmitter<string>();

  constructor(private  voteService: VoteService) { }

  ngOnInit() {
  }

  jumpForCoins() {
    this.votes = this.voteService.getVotes();
  }
  jump() {
    alert(this.name + ' has jumped');
  }

  crushGoomba(goombaId: any) {
    this.removeGoomba.next(goombaId);
    this.votes = +1;
  }

}

<ul class="collection">
    <li class="collection-item avatar">
      <img src="assets/goomba.png" alt="" class="circle">
      <span class="title">it is me! Safnaj Kumara {{id}} </span>
    </li>
  </ul>
  <button class="btn waves-effect waves-light light-blue accent-2" (click)="crushGoomba()">Kill me </button>

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-safnaj',
  imports: [],
  templateUrl: './safnaj.component.html',
  styleUrl: './safnaj.component.scss'
})
export class SafnajComponent {
  @Input() id!: string;
  @Output()
  removeGoomba = new EventEmitter<string>();
  constructor() { }

  ngOnInit() {
  }

  crushGoomba() {
    this.removeGoomba.emit(this.id);
    console.log("Goomba id", this.id)
  }
}