refactor: use OnPush and signals

ideatic · Mar 19, 2024 · 2120282 · 2120282
1 parent 408aad8
commit 2120282
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 22 deletions.
diff --git a/...ng-talk/src/lib/components/channel/message/body/ng-talk-channel-message-body.component.ts b/...ng-talk/src/lib/components/channel/message/body/ng-talk-channel-message-body.component.ts
@@ -11,23 +11,23 @@ import {NgTalkChannelMessageWritingComponent} from "./ng-talk-channel-message-wr
   standalone: true,
   imports: [FnPipe, NgTalkChannelMessageWritingComponent],
   template: `
-      @switch (message.type) {
-          <!-- Text message -->
-          @case (MessageType.Text) {
-              <div class="text-message" [innerHTML]="message | fn:transformContent:this"></div>
-          }
-          @case (MessageType.Image) {
-              <img loading="lazy" style="margin-bottom: 8px" [src]="message.content"/>
-          }
-          @case (MessageType.Gif) {
-              <img loading="lazy" style="margin-bottom: 8px" [src]="message.content"/>
-          }
+    @switch (message.type) {
+      <!-- Text message -->
+      @case (MessageType.Text) {
+        <div class="text-message" [innerHTML]="message | fn:transformContent:this"></div>
+      }
+      @case (MessageType.Image) {
+        <img loading="lazy" style="margin-bottom: 8px" [src]="message.content"/>
+      }
+      @case (MessageType.Gif) {
+        <img loading="lazy" style="margin-bottom: 8px" [src]="message.content"/>
+      }
 
-          <!-- Writing animation -->
-          @case (MessageType.Writing) {
-              <ng-talk-channel-message-writing/>
-          }
+      <!-- Writing animation -->
+      @case (MessageType.Writing) {
+        <ng-talk-channel-message-writing/>
       }
+    }
   `,
   styleUrl: 'ng-talk-channel-message-body.component.less'
 })

diff --git a/projects/ng-talk/src/lib/components/channel/send/emoji/ng-talk-send-emoji.component.ts b/projects/ng-talk/src/lib/components/channel/send/emoji/ng-talk-send-emoji.component.ts
@@ -1,5 +1,5 @@
 import {KeyValue, KeyValuePipe} from '@angular/common';
-import {Component, output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, output} from '@angular/core';
 import {FormsModule} from "@angular/forms";
 import {FnPipe} from "../../../../pipes/fn.pipe";
 import {NgTalkChannelComponent} from '../../ng-talk-channel.component';
@@ -8,14 +8,15 @@ import emoji from './emoji.json';
 @Component({
   selector: 'ng-talk-send-emoji',
   standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [FormsModule, KeyValuePipe, FnPipe],
   template: `
-      <input type="search" [placeholder]="chat.settings.search" [(ngModel)]="searchQuery"/>
-      <div>
-          @for (pair of emoji | keyvalue | fn:filter:this:searchQuery;track pair) {
-              <span (click)="emojiSelected.emit(pair.value)">{{ pair.value }}</span>
-          }
-      </div>
+    <input type="search" [placeholder]="chat.settings.search" [(ngModel)]="searchQuery"/>
+    <div>
+      @for (pair of emoji | keyvalue | fn:filter:this:searchQuery; track pair) {
+        <span (click)="emojiSelected.emit(pair.value)">{{ pair.value }}</span>
+      }
+    </div>
   `,
   styles: `
     :host {