teomanofficial

export class ChatRoomComponent implements OnInit {
  onlineUsersCount: WritableSignal<number> = signal(0)

  ngOnInit() {
    // Update count via setter
    app.events.on('chat.room.connected', () => {
      this.onlineUsersCount.set(this.onlineUsersCount() + 1);
    });
    
    // Update count via callback

teomanofficial

@Component({
  selector: 'my-cmp',
  template: `
    <span #content>{{ ... }}</span>
    <span #tooltip>{{ ... }}</span>
  `,
})
export class MyComponent {
  @ViewChild('content') contentRef: ElementRef;
  @ViewChild('tooltip') tooltipRef: ElementRef;

teomanofficial

@defer (on viewport) {
  <comment-list>
    @for(comment of comments) { 
      <comment-item [comment]="comment"></comment-item>
    }
  <comment-list />
} @placeholder {
  <img src="skelton-comments.png">
}

teomanofficial

@for (user of users; track user.id) {
  {{ user.name }}
} @empty {
  Empty list of users
}

teomanofficial

@switch (accessLevel) {
  @case ('admin') { <admin-dashboard/> }
  @case ('moderator') { <moderator-dashboard/> }
  @default { <user-dashboard/> }
}

teomanofficial

@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}

teomanofficial

<div *ngIf="loggedIn; else anonymousUser">
  The user is logged in
</div>
<ng-template #anonymousUser>
  The user is not logged in
</ng-template>

teomanofficial

fetch('/data.kml')
  .then(res => res.text())
  .then(geojson => {
    const reader = new KML({ showPointNames: false });
    const features = reader.readFeatures(geojson, { featureProjection: 'EPSG:3857' });
    const vectorSource = new VectorSource({ features });
    map.addLayer(new VectorLayer({ source: vectorSource as any }))
  })
  .catch(() => {
    alert('hata Oluştu!');

teomanofficial

fetch('/data.json')
  .then(res => res.json())
  .then(geojson => {
    const reader = new GeoJSON({ featureProjection: 'EPSG:3857' });
    const features = reader.readFeatures(geojson);
    const vectorSource = new VectorSource({ features });
    map.addLayer(new VectorLayer({ source: vectorSource }))
  })
  .catch((e) => {
    alert('hata Oluştu!');

teomanofficial

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({