Feb 9, 2025

Level 5

Sharing State between two+ of the same components in different areas of the page?

I have 3 components that are on a show page, and in a Modal that I'm triggering. I'm having trouble figuring out how to sync the state between the uses of a single one of these components. For example, I have this Watch Component that I want to share its state between the page and modal.

<?php

namespace App\Livewire;

use App\Models\Movie;
use Illuminate\View\View;
use Livewire\Attributes\Validate;
use Livewire\Component;

class WatchInput extends Component
{

    #[Validate('required|boolean')]
    public bool $isWatched = false;

    public int $movieId;

    public function mount(int $movieId): void
    {
        $this->movieId = $movieId;
        $movie = Movie::findOrFail($movieId);

        // If there's a watch record for this user, grab its "is_watched" value; otherwise default to false.
        $this->isWatched = (bool) ($movie->watches()
            ->where('user_id', auth()->id())
            ->value('is_watched') ?? false
        );
    }

    public function toggleWatch(): void
    {
        $this->validate();

        // Toggle the state
        $this->isWatched = !$this->isWatched;

        // Do a minimal update on the watchlist relationship
        $movie = Movie::findOrFail($this->movieId);
        $movie->watches()->updateOrCreate(
            ['user_id' => auth()->id()],
            ['is_watched' => $this->isWatched]
        );
    }

    public function render(): View
    {
        return view('livewire.watch-input');
    }
}

@if (Auth::check())
                    <form>
                        @csrf
                        <div class="flex items-center space-x-10 my-4">
                            <!-- TODO: Make one parent component that holds all 3? -->
                            {{-- Watched Date --}}
                            <livewire:watch-input :movie-id="$movie->id"/>

                            {{-- Rating Input --}}
                            <livewire:rating-input :movie="$movie"/>

                            {{-- Like Input --}}
                            <livewire:like-input :movie="$movie"/>

                            {{-- Watchlist --}}
                            {{-- Kebab case for the prop is okay --}}
                            <livewire:watchlist-input :movie-id="$movie->id"/>
                        </div>
                    </form>
                @else

{{-- Begin form --}}
                <form
                    action="{{ route('movies.reel.store', ['movie' => $movie->id]) }}"
                    method="POST"
                    class="space-y-6"
                >
                    @csrf

                    {{-- Rating and Like Row --}}
                    <div class="flex items-center gap-8">
                        {{-- Rating --}}
                        <div class="flex-1">
                            {{-- Rating Input --}}
                            <livewire:rating-input :movie="$movie"/>
                        </div>

                        {{-- Like --}}
                        <div class="flex-1">
                            <livewire:like-input :movie="$movie"/>
                        </div>
                    </div>

                    {{-- Watch --}}
                    <livewire:watch-input :movie-id="$movie->id"/>

                    {{-- Review Text --}}
                    <div>
                        <label class="block text-sm text-primary-400 mb-1">Your Review</label>
                        <textarea
                            name="content"
                            rows="4"
                            placeholder="Share your thoughts about the movie..."
                            class="w-full bg-zinc-800 text-primary-400 border border-zinc-700 rounded-md px-3 py-2
                            placeholder:text-zinc-500 focus:ring-primary-500 focus:border-primary-500"
                        >{{ old('content') }}</textarea>
                    </div>

                    {{-- Submit Button --}}
                    <div class="flex justify-end">
                        <button
                            type="submit"
                            class="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors"
                        >
                            Submit
                        </button>
                    </div>
                </form>

The bottom is the modal form. Any tips are appreciated. I can't seem to understand what to do from reading the docs.

RemiM

1 year ago

Level 16

You can use Livewire's Alpine store to share state globally across multiple instances.

Modify watch-input.blade.php

<div x-data="{ isWatched: $store.watchState['{{ $movieId }}'] ?? @json($isWatched) }">
    <div class="cursor-pointer" 
        wire:click="toggleWatch" 
        x-on:click="isWatched = !isWatched; $store.watchState['{{ $movieId }}'] = isWatched"
    >
        <x-icon-clock
            class="w-10 h-10 hover:text-primary-400 transition-colors"
            :class="isWatched ? 'fill-primary-500 stroke-current text-zinc-950' : 'fill-none text-primary-500'"
        />
    </div>
</div>

Add Alpine store in app.blade.php or layout.blade.php

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('watchState', {});
    });
</script>

This is the best for instant UI updates and lightweight approach.

Now, you could also do it with Livewire Events if Livewire components must stay in sync across re-renders.

Another solution would be to create a parent component if you want centralized state management.

1 like

ctrlaltdelme

1 year ago

Level 5

@RemiM That's awesome thank you! I seem to be having a problem with this suggestion though. Not sure if I did something wrong.

<div x-data="{ isWatched: $store.watchState['{{ $movieId }}'] ?? @json($isWatched) }">
    <label class="block text-sm text-primary-400 mb-1">{{ $isWatched ? 'Watched' : 'Watch' }}</label>
    <div class="relative flex items-center group">
        <div class="cursor-pointer " wire:click="toggleWatch"
             x-on:click="isWatched = !isWatched; $store.watchState['{{ $movieId }}'] = isWatched">
            <x-icon-eye-outline
                class="w-10 h-10 hover:text-primary-400 transition-colors {{
                $isWatched ? 'fill-primary-500 stroke-current text-zinc-950' : 'fill-none text-primary-500'
                 }}"/>
        </div>
    </div>
</div>

And I put this script in my app.blade.php, but there's still a desync between the page and the modal

https://i.imgur.com/gQf1P52.png https://i.imgur.com/EoBBpjS.png

Do I need to do anything in the component?

<?php

namespace App\Livewire;

use App\Models\Movie;
use Illuminate\View\View;
use Livewire\Attributes\Validate;
use Livewire\Component;

class WatchInput extends Component
{

    #[Validate('required|boolean')]
    public bool $isWatched = false;

    public int $movieId;

    public function mount(int $movieId): void
    {
        $this->movieId = $movieId;
        $movie = Movie::findOrFail($movieId);

        // If there's a watch record for this user, grab its "is_watched" value; otherwise default to false.
        $this->isWatched = (bool) ($movie->watches()
            ->where('user_id', auth()->id())
            ->value('is_watched') ?? false
        );
    }

    public function toggleWatch(): void
    {
        $this->validate();

        // Toggle the state
        $this->isWatched = !$this->isWatched;

        // Do a minimal update on the watchlist relationship
        $movie = Movie::findOrFail($this->movieId);
        $movie->watches()->updateOrCreate(
            ['user_id' => auth()->id()],
            ['is_watched' => $this->isWatched]
        );
    }

    public function render(): View
    {
        return view('livewire.watch-input');
    }
}

RemiM

1 year ago

Level 16

So I made couple changes here:

<div x-data="{ 
        isWatched: $store.watchState['{{ $movieId }}'] ?? @json($isWatched),
        toggleWatch() {
            this.isWatched = !this.isWatched; 
            $store.watchState['{{ $movieId }}'] = this.isWatched;
            @this.call('toggleWatch'); // Sync with Livewire
        }
    }">
    <label class="block text-sm text-primary-400 mb-1">{{ isWatched ? 'Watched' : 'Watch' }}</label>
    <div class="relative flex items-center group">
        <div class="cursor-pointer" x-on:click="toggleWatch">
            <x-icon-eye-outline
                class="w-10 h-10 hover:text-primary-400 transition-colors {{
                isWatched ? 'fill-primary-500 stroke-current text-zinc-950' : 'fill-none text-primary-500'
                }}"/>
        </div>
    </div>
</div>

Removed wire:click: Since we're already managing the toggleWatch functionality with Alpine via x-on:click, the wire:click is redundant and unnecessary. Using both can cause issues because Livewire will try to trigger the same method independently from Alpine.
Addition of the Alpine toggleWatch() method: this method toggles the isWatched state on the frontend using Alpine and then calls the toggleWatch() method in Livewire via @this.call('toggleWatch'). This ensures that when Alpine updates the state, Livewire's backend also gets updated.

Let me know if this solve the issue.

1 like

ctrlaltdelme

1 year ago

Level 5

@RemiM It's still working on the show page where the component is used, but not in the Modal. Does it matter that the Modal is just a plain Blade Component and not a Livewire component? I feel like this should work given my understanding of it, but it still won't sync. The state looks the same as the screenshots from my last post.

It is triggering the Livewire method though and updating the DB so that's working. It just isn't communicating itself to itself in the modal

ctrlaltdelme

1 year ago

Level 5

@remim any ideas? Would it make sense to just make the show page a full page Livewire component?

RemiM

1 year ago

Level 16

In the toggleWatch method, append a dispatch call at the end:

    $this->dispatch('watchToggled', $this->movieId, $this->isWatched);

Add an x-init attribute to your parent div, alongside x-data, with the following:

x-init="
        Livewire.on('watchToggled', (movieId, newState) => {
            if (movieId == {{ $movieId }}) {
                isWatched = newState;
                $store.watchState[movieId] = newState;
            }
        });
    "

Now, just like you mentioned it, consider making it a Livewire component instead of a Blade component. That way, when isWatched updates in the database, Livewire will automatically refresh the modal state.

ctrlaltdelme

1 year ago

Level 5

@RemiM Thanks!

Where is movieId coming from though?

RemiM

1 year ago

Level 16

The movieIdstarts in the Livewire component, then it's passed to the Blade view, where it's injected into the Alpine component. The Alpine component uses movieId to manage state in the store, and to synchronize with Livewire events.

ctrlaltdelme

1 year ago

Level 5

@RemiM I had tried your suggestion and still found it wasn't sharing the state. So, I started over on my own trying to read through the Livewire docs to figure this out. I have something so far that will trigger the watch state (albeit a bit slower than yours I think) and it syncs it with the db, calling Livewire.

watch-input.blade.php (Livewire)

<div
    x-data="{
        isWatched: $wire.entangle('isWatched').defer}"
    x-on:watch-toggled.window="isWatched = $event.detail.isWatched"

>
    <label class="block text-sm text-primary-400 mb-1">{{ $isWatched ? 'Watched' : 'Watch' }}</label>
    <div class="relative flex items-center group">
        <div class="cursor-pointer" x-on:click="$wire.toggleWatch">
            <x-icon-eye-outline
                class="w-10 h-10 hover:text-primary-400 transition-colors {{
                $isWatched ? 'fill-primary-500 stroke-current text-zinc-950' : 'fill-none text-primary-500'
                }}"/>
        </div>
    </div>
</div>

WatchInput.php

<?php

namespace App\Livewire;

use App\Models\Movie;
use Illuminate\View\View;
use Livewire\Attributes\Validate;
use Livewire\Component;

class WatchInput extends Component
{

    #[Validate('required|boolean')]
    public bool $isWatched = false;

    public int $movieId;

    public function mount(int $movieId): void
    {
        $this->movieId = $movieId;
        $movie = Movie::findOrFail($movieId);

        // If there's a watch record for this user, grab its "is_watched" value; otherwise default to false.
        $this->isWatched = (bool) ($movie->watches()
            ->where('user_id', auth()->id())
            ->value('is_watched') ?? false
        );
    }

    public function toggleWatch(): void
    {
        $this->validate();

        // Toggle the state
        $this->isWatched = !$this->isWatched;

        // Do a minimal update on the watchlist relationship
        $movie = Movie::findOrFail($this->movieId);
        $movie->watches()->updateOrCreate(
            ['user_id' => auth()->id()],
            ['is_watched' => $this->isWatched]
        );

        $this->dispatch('watch-toggled', $this->movieId, $this->isWatched);
    }


    public function render(): View
    {
        return view('livewire.watch-input');
    }
}

show.blade.php (/movies/show) (Non-Livewire)

@php
    use Carbon\Carbon;
@endphp

<x-app>
    <x-slot:title>
        {{ $movie->title }} - ReelTrack
    </x-slot:title>

    {{-- Flash Message Container --}}
    @if(session('status'))
        <div class="absolute bg-green-600 rounded-md p-4 top-10 bottom-10 left-10 right-10">
            <div class="alert">
                {{ session('status') }}
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="absolute bg-red-600 rounded-md p-4 top-50 bottom-0 left-0 right-0 z-10">
            <div class="alert">
                {{ session('error') }}
            </div>
        </div>
    @endif

    {{-- Backdrop with gradient overlay --}}
    <div class="relative aspect-[2.76/1] w-full">
        <div class="absolute inset-0 bg-linear-to-t from-zinc-900 "></div>
        <img
            src="{{ $movie->backdrop_path }}"
            alt="{{ $movie->title }}"
            class="w-full h-full object-cover object-center"
        />
    </div>

    {{-- Main content --}}
    <div class="container max-w-6xl mx-auto -mt-64 relative z-10">
        <div class="flex gap-8">
            {{-- Left column: Poster and actions --}}
            <div class="w-[300px] shrink-0" x-data="{ isOpen: false }">
                <img
                    src="{{ $movie->poster_path }}"
                    alt="{{ $movie->poster_path }}"
                    class="w-full rounded-lg shadow-lg"
                />

                {{-- Action buttons --}}
                @auth
                    <div
                        class="mt-4 space-y-2"
                    >
                        <button
                            type="button"
                            class="w-full bg-primary-500 text-zinc-800 py-2 rounded-md hover:bg-primary-600 transition-colors"
                        >
                            Add to Watchlist
                        </button>
                        <button
                            type="button"
                            @click="isOpen = true"
                            class="w-full bg-zinc-800 text-primary-500 py-2 rounded-md hover:bg-zinc-700 transition-colors"
                        >
                            Leave a Reel or Review
                        </button>

                        {{-- Modal --}}
                        <x-review-modal :movie="$movie"/>
                    </div>
                @endauth
            </div>

            {{-- Right column: Movie details --}}
            <div class="grow ">
                {{-- Title and tagline --}}
                <h1 class="text-4xl text-primary-500 font-bold">{{ $movie->title }}</h1>
                @if (!empty($movie->tagline))
                    <p class="text-xl italic mt-2 text-primary-300">{{ $movie->tagline }}</p>
                @endif

                {{-- Meta information --}}
                <div class="flex items-center gap-4 mt-4">
                    <span class="text-zinc-400">{{ $movie->release_date->format('F d, Y') }}</span>
                    <span class="text-zinc-400">{{ $movie->runtime }} min</span>
                </div>

                {{-- Genres --}}
                @if (!empty($movie->genres))
                    <div class="flex gap-2 mt-4">
                        @foreach ($movie->genres as $genre)
                            <a
                                href="{{ route('movies.index', ['genre' => $genre->name ?? 'genre-placeholder']) }}"
                                class="px-3 py-1 font-medium rounded-full border border-primary-500 text-sm
                                hover:bg-primary-500 hover:text-white transition-colors"
                            >
                                {{ $genre->name }}
                            </a>
                        @endforeach
                    </div>
                @endif

                {{-- Movie Stats --}}
                @include('movies.partials.movie-stats', ['movie' => $movie])

                {{-- Overview --}}
                <div class="mt-8">
                    <h2 class="text-primary-500 font-semibold mb-2">Overview</h2>
                    <p class="leading-relaxed">{{ $movie->overview }}</p>
                </div>

                {{-- User Actions Row --}}
                <!-- TODO: All of these components need to talk to each other in the modal -->
                @if (Auth::check())
                    <form>
                        @csrf
                        <div class="flex items-center space-x-10 my-4">
                            <!-- TODO: Make one parent component that holds all 3? -->
                            {{-- Watched Date --}}
                            <livewire:watch-input :movie-id="$movie->id"/>

                            {{-- Rating Input --}}
                            <livewire:rating-input :movie="$movie"/>

                            {{-- Like Input --}}
                            <livewire:like-input :movie="$movie"/>

                            {{-- Watchlist --}}
                            {{-- Kebab case for the prop is okay --}}
                            <livewire:watchlist-input :movie-id="$movie->id"/>
                        </div>
                    </form>
                @else
                    <!-- TODO: Find a way to redirect back here -->
                    <div class="my-6"><a href="{{ route('login') }}"
                                         class="p-2 rounded-md bg-primary-700 text-zinc-200 shadow-md
                                         inset-shadow-sm hover:bg-primary-800 transition-all ">Login
                            to rate or review</a></div>
                @endauth


                {{-- Cast & Crew Tabs --}}
                <x-cast-crew-tabs :cast="$movie->cast" :crew="$movie->crew"/>

                <a href="{{ route('movies.cast-and-crew', $movie) }}" class="block mt-4
                text-primary-500 font-medium
                hover:text-primary-600
                hover:underline
                transition-all underline-offset-2">Full
                    Cast & Crew</a>

                {{-- Reviews --}}
                {{--                <div class="mt-8" id="movie_reviews">--}}
                {{--                    <x-movie-reviews :movie="$movie"/>--}}
                {{--                </div>--}}
            </div>
        </div>
    </div>
</x-app>

review-modal.blade.php (Non-Livewire)

<div>
    <!-- Modal backdrop -->
    <div
        class="fixed inset-0 bg-zinc-800/50 backdrop-blur-lg  z-50"
        x-show="isOpen"
        x-cloak
        x-transition
        @click="isOpen = false"
        @keydown.escape.window="isOpen = false"
        style="display: none;" {{-- Ensures Alpine begins with display: none --}}
    >
        <!-- Modal inner container -->
        <div
            class="fixed inset-0 flex items-center justify-center p-4"
            @click.stop {{-- Prevent clicks inside from closing the modal --}}
        >
            {{-- Modal content --}}
            <div class="bg-zinc-900 rounded-lg shadow-xl max-w-2xl w-full p-6">
                {{-- Modal Header --}}
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-semibold text-primary-500">
                        Review {{ $movie->title }}
                    </h2>
                    <button
                        type="button"
                        @click="isOpen = false;confirm('Are you sure you want to cancel?')"
                        class="text-zinc-400 hover:text-primary-500"
                    >
                        <!-- Close Icon -->
                        <x-icon-close class="w-6 h-6"/>
                    </button>
                </div>

                {{-- Begin form --}}
                <form
                    action="{{ route('movies.reel.store', ['movie' => $movie->id]) }}"
                    method="POST"
                    class="space-y-6"
                >
                    @csrf

                    {{-- Rating and Like Row --}}
                    <div class="flex items-center gap-8">
                        {{-- Rating --}}
                        <div class="flex-1">
                            {{-- Rating Input --}}
                            <livewire:rating-input :movie="$movie"/>
                        </div>

                        {{-- Like --}}
                        <div class="flex-1">
                            <livewire:like-input :movie="$movie"/>
                        </div>
                    </div>

                    {{-- Watch --}}
                    <livewire:watch-input :movie-id="$movie->id"/>

                    {{-- Review Text --}}
                    <div>
                        <label class="block text-sm text-primary-400 mb-1">Your Review</label>
                        <textarea
                            name="content"
                            rows="4"
                            placeholder="Share your thoughts about the movie..."
                            class="w-full bg-zinc-800 text-primary-400 border border-zinc-700 rounded-md px-3 py-2
                            placeholder:text-zinc-500 focus:ring-primary-500 focus:border-primary-500"
                        >{{ old('content') }}</textarea>
                    </div>

                    {{-- Submit Button --}}
                    <div class="flex justify-end">
                        <button
                            type="submit"
                            class="px-4 py-2 bg-primary-500 text-white rounded-md hover:bg-primary-600 transition-colors"
                        >
                            Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

I think I'm close. For some reason the store just wasn't working. I would check the DOM and nothing was being stored. The script wouldn't change at all.

RemiM

1 year ago

Level 16

If it's the store that isn't working, maybe it's because you are assuming Livewire automatically puts data inside detail in your x-on attribute. I think to fix it, you can send an associate array, so that it exists in Alpine, and this way, it can properly extract isWatched from $event.detail.

You simply alter your dispatch method:

$this->dispatch('watch-toggled', ['movieId' => $this->movieId, 'isWatched' => $this->isWatched]);

maybe you can add a console.log as well to check if it's working:

x-on:watch-toggled.window="isWatched = $event.detail.isWatched; console.log($event.detail)"

ctrlaltdelme

1 year ago

Level 5

@RemiM That sort of works. I can console.log the event.detail where I noticed it's an array with just one index, so detail[0] gives you the event Object. But the WatchInput inside the modal is still not syncing with the WatchInput on the show page. I'm stuck at what to do here.

EDIT: Nevermind! I had to create a Livewire Action to handle itself being toggled. I'm not sure if this is the best way to be doing this as it is a little slow to update sometimes (as was my initial problem). Is there a better way to toggle?

<div
    x-data="{
        isWatched: $wire.entangle('isWatched').defer}"
    x-on:watch-toggled="isWatched = $event.detail[0].isWatched"

>
    <label class="block text-sm text-primary-400 mb-1">{{ $isWatched ? 'Watched' : 'Watch' }}</label>
    <div class="relative flex items-center group">
        <div class="cursor-pointer" x-on:click="$wire.toggleWatch">
            <x-icon-eye-outline
                class="w-10 h-10 hover:text-primary-400 transition-colors {{
                $isWatched ? 'fill-primary-500 stroke-current text-zinc-950' : 'fill-none text-primary-500'
                }}"/>
        </div>
    </div>
</div>

<?php

namespace App\Livewire;

use App\Models\Movie;
use Illuminate\View\View;
use Livewire\Attributes\On;
use Livewire\Attributes\Validate;
use Livewire\Component;

class WatchInput extends Component
{

    #[Validate('required|boolean')]
    public bool $isWatched = false;

    public int $movieId;

    public function mount(int $movieId): void
    {
        $this->movieId = $movieId;
        $movie = Movie::findOrFail($movieId);

        // If there's a watch record for this user, grab its "is_watched" value; otherwise default to false.
        $this->isWatched = (bool) ($movie->watches()
            ->where('user_id', auth()->id())
            ->value('is_watched') ?? false
        );
    }

    #[On('watch-toggled')]
    public function handleWatchUpdate($data): void
    {
        if ($data['movieId'] === $this->movieId) {
            $this->isWatched = $data['isWatched'];
        }
    }

    public function toggleWatch(): void
    {
        $this->validate();

        // Toggle the state
        $this->isWatched = !$this->isWatched;

        // Do a minimal update on the watchlist relationship
        $movie = Movie::findOrFail($this->movieId);
        $movie->watches()->updateOrCreate(
            ['user_id' => auth()->id()],
            ['is_watched' => $this->isWatched]
        );

        $this->dispatch('watch-toggled', ['movieId' => $this->movieId, 'isWatched' => $this->isWatched]);
    }


    public function render(): View
    {
        return view('livewire.watch-input');
    }
}

RemiM

1 year ago

Level 16

Well, I definitely think there's better options, especially with Livewire 3.

The template part could be even simplified:

<div>
    <label class="block text-sm text-primary-400 mb-1">{{ $isWatched ? 'Watched' : 'Watch' }}</label>
    <div class="relative flex items-center group">
        <div class="cursor-pointer" wire:click="toggleWatch">
            <x-icon-eye-outline
                class="w-10 h-10 hover:text-primary-400 transition-colors {{
                $isWatched ? 'fill-primary-500 stroke-current text-zinc-950' : 'fill-none text-primary-500'
                }}"/>
        </div>
    </div>
</div>

The class would have some small changes as well, especially Livewire's built-in broadcasting .to(*) method, which is much cleaner than trying to manually sync with Alpine in the end:

<?php
namespace App\Livewire;

use App\Models\Movie;
use Illuminate\View\View;
use Livewire\Attributes\On;
use Livewire\Attributes\Validate;
use Livewire\Component;

class WatchInput extends Component
{
    #[Validate('required|boolean')]
    public bool $isWatched = false;
    
    public int $movieId;
    
    public function mount(int $movieId): void
    {
        $this->movieId = $movieId;
        $this->loadWatchedState();
    }
    
    private function loadWatchedState(): void
    {
        $movie = Movie::findOrFail($this->movieId);
        $this->isWatched = (bool) ($movie->watches()
            ->where('user_id', auth()->id())
            ->value('is_watched') ?? false
        );
    }
    
    #[On('watch-toggled')]
    public function refreshWatchState(): void
    {
        $this->loadWatchedState();
    }
    
    public function toggleWatch(): void
    {
        $this->validate();
        
        // Toggle the state
        $this->isWatched = !$this->isWatched;
        
        // Update database
        $movie = Movie::findOrFail($this->movieId);
        $movie->watches()->updateOrCreate(
            ['user_id' => auth()->id()],
            ['is_watched' => $this->isWatched]
        );
        
        // Broadcast to all components
        $this->dispatch('watch-toggled')->to('*');
    }
    
    public function render(): View
    {
        return view('livewire.watch-input');
    }
}

Please or to participate in this conversation.