(feat): generic hashtags comp

src/app/modules/pro/channel/categories/categories.component.scss

+m-pro--channel--categories {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+
+ .m-proChannel__category {
+ cursor: pointer;
+ color: var(--text-color);
+ padding: 16px 16px 0;
+
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+
+ &.m-proChannel__selectedCategory {
+ color: var(--primary-color);
+ }
+ }
+}

src/app/modules/pro/channel/categories/categories.component.ts

+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { ProChannelService } from "../channel.service";
+import { Router } from "@angular/router";
+
+@Component({
+ selector: 'm-pro--channel--categories',
+ template: `
+ <div
+ class="m-proChannel__category"
+ [class.m-proChannel__selectedCategory]="!!tag.selected"
+ (click)="selectTag(tag)"
+ *ngFor="let tag of channel.pro_settings.tag_list"
+ >
+ {{tag.label}}
+ </div>
+ `,
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+
+export class ProCategoriesComponent implements OnInit {
+
+ @Input() type: string;
+ @Input() params: any = {};
+
+ get channel() {
+ return this.channelService.currentChannel;
+ }
+
+ get currentURL() {
+ return `pro/${this.channel.username}/${this.type}`
+ }
+
+ constructor(
+ protected channelService: ProChannelService,
+ protected router: Router,
+ protected cd: ChangeDetectorRef,
+ ) {
+ }
+
+ ngOnInit() {
+ }
+
+ selectTag(clickedTag: any) {
+ for (let tag of this.channel.pro_settings.tag_list) {
+ tag.selected = tag.tag == clickedTag.tag;
+ }
+
+ this.router.navigate([this.currentURL, { ...this.params, hashtag: clickedTag.tag }]);
+
+ this.detectChanges();
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ }
+}