2

I am trying to fire an event in from the child component to the parent component , till the firing of the event code is working correctly , but it is not displaying anything in the child component. Child Component:

<template>
<template if:true={showRoomInfo}>
    <div class="slds-p-around_medium lgc-bg" onclick={meetingRoomInfoHandler}>

        <lightning-tile label={meetingRoomInfo.roomName} >
            <p class="slds-truncate" title={meetingRoomInfo.roomCapacity}>Room Capacity:
                {meetingRoomInfo.roomCapacity}</p>
        </lightning-tile>
    </div>
</template>

JS File

    import { LightningElement,api } from 'lwc';

    export default class MeetingRoom extends LightningElement {
        @api meetingRoomInfo={roomName:'A-01', roomCapacity:'12'};

        @api showRoomInfo = false;
    meetingRoomInfoHandler(){
        const tileclickByUser = new CustomEvent('tileClick',{detail:this.meetingRoomInfo});
        this.dispatchEvent(tileclickByUser);
    }
}

Parent component:

<template>
<lightning-card title="Meeting Rooms">
    <lightning-layout>
        <lightning-layout-item size="4" padding="around-small">
            <ul>
                <template for:each={meetingRoomsInfo} for:item="room">
                    <li key={room.roomName} style="padding: 10px">
                        <c-meeting-room meeting-room-info={room} show-room-info ontileclick={onmeetingRoomInfoFromChild}>
                            <lightning-tile label={room.roomName}>
                                <p class="slds-truncate" title={room.roomCapacity}>Room Capacity:
                                    {room.roomCapacity}</p>
                            </lightning-tile>

                        </c-meeting-room>
                    </li>

                </template>
            </ul>
        </lightning-layout-item>
        <lightning-layout-item size="8" padding="around-small">
          Your Meeting Room info goes here : {meetingRoomInfoBy}
        </lightning-layout-item>
    </lightning-layout>
</lightning-card>

JS File

import { LightningElement,track } from 'lwc';   
export default class MeetingRooms extends LightningElement {

    @track meetingRoomInfoBy;

    meetingRoomsInfo = [
     {roomName:'A-01',roomCapacity:'12'},
     {roomName:'A-02',roomCapacity:'16'},
     {roomName:'A-03',roomCapacity:'12'},
     {roomName:'B-01',roomCapacity:'05'},
     {roomName:'B-02',roomCapacity:'08'},
     {roomName:'B-03',roomCapacity:'10'},
     {roomName:'C-01',roomCapacity:'20'}
    ];

    onmeetingRoomInfoFromChild(event) {
        const meetingRoomInfoByyt = event.details;
        this.meetingRoomInfoBy = meetingRoomInfoByyt.roomName;
    }
}

When i am clicking on the tile element the result is displaying nothing.

1

See below piece of your code:-

const tileclickByUser = new CustomEvent('tileClick',{detail:this.meetingRoomInfo});
this.dispatchEvent(tileclickByUser);

The custom event name in Lightning web component cannot be in uppercase. You have named it:- tileClick where C is in uppercase. You should name it tileclick to make it work correctly.

The CustomEvent() constructor has one required parameter, which is a string indicating the event type. As a component author, you name the event type when you create the event. You can use any string as your event type. However, we recommend that you conform with the DOM event standard.

  • No uppercase letters
  • No spaces
  • Use underscores to separate words
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.