touhidrahman

<div tailwind="layoutCenter" class="py-12">
    <button [tailwind]="'button buttonSecondary'">My Button</button>
    <!-- or -->
    <button tailwind="button buttonSecondary">My Button</button>
</div>

touhidrahman

import { Directive, HostBinding, Input } from '@angular/core'
import { APP_TAILWIND_STYLES } from '@core/values/styles'

@Directive({
    selector: '[tailwind]',
})
export class TailwindDirective {
    private twClasses = ''

    @HostBinding('class')

touhidrahman

export const APP_TAILWIND_STYLES: { [key: string]: string } = {
    button: `
            hover:bg-indigo-500
            px-6 py-2
            tracking-wider
            text-indigo-50
            uppercase
            bg-indigo-400
            rounded
        `,

touhidrahman

/** tailwind.directive.ts */

import { Directive, HostBinding, Input } from '@angular/core'
import { APP_TAILWIND_STYLES } from '@core/values/styles'

@Directive({
    selector: '[tailwind]',
})
export class TailwindDirective {
    private twClasses = ''

touhidrahman

export interface CustomEvent {
    key: string;
    payload: unknown;
}

@Injectable({ providedIn: 'root' })
export class EventBusService {

    private eventsSubject = new Subject<CustomEvent>();

touhidrahman

import {Directive, ElementRef, Input, Renderer2} from '@angular/core';

@Directive({ selector: '[appHide]' })
export class HideDirective {
    @Input() set appHide(shouldHide: boolean) {
        (shouldHide)
            ? this.renderer2.setStyle(this.elRef.nativeElement, 'visibility', 'hidden')
            : this.renderer2.removeStyle(this.elRef.nativeElement, 'visibility');
    }

touhidrahman

<ng-container *ngIf="state$ | async as state">
    <article *ngIf="state.article as article" class="article">
        <h1>{{ article.title }}</h1>
        <p>{{ article.body }}</p>
    </article>

    <section class="comments">
        <h1>Comments</h1>
        <div *ngIf="state.commentsPagination as pagination" class="pagination">
            View

touhidrahman

@Injectable()
export class ViewArticlePageStateService {
    // ... class properties declaration, omitted for brevity 

    constructor(private articleService: ArticleService, private commentService: CommentService) {
        this.handleEffects()
    }

    private handleEffects() {
        this.id.value$.pipe(

touhidrahman

@Injectable()
export class ViewArticlePageStateService {
    private currentState: ViewArticlePageState = initialState

    private id: StateAtom<number> = new StateAtom(initialState.id)
    private article: StateAtom<Article> = new StateAtom(initialState.article)
    private loading: StateAtom<boolean> = new StateAtom(initialState.loading)
    private searchTerm: StateAtom<string> = new StateAtom(initialState.searchTerm)
    private comments: StateAtom<Comment[]> = new StateAtom(initialState.comments)
    private commentsPagination: StateAtom<Params> = new StateAtom(initialState.commentsPagination)

touhidrahman

export interface ViewArticlePageState {
    id: number
    article: Article
    comments: Comment[]
    searchTerm: string
    loading: boolean
    commentsPagination: {
        _limit: number
        _start: number
        _sort: string