Currently have a modal parent component. Inside of the content section of the modal I have 3 screens that are called via templates, all on separate templates. I am trying to get my 2nd screen to have the 3rd screen appear by pressing a button on it. IE if:true{isButtonPressedOnSecondScreen}
then have 3rd screen appear and change the footer. I am getting stuck because I am not sure how to do this. I have tried using @api and @track but have not had any success with methods or variables. I also tried calling the 3rd screen inside of the second one which works, but I cannot get the footer of the parent to change. Any suggestions on how I would be able to do this?
EDIT: added code
modal.html (just showing content and footer templates):
<template if:true={searchScreen}>
<c-search-screen></c-search-screen>
</template>
<template if:true={searchResults}>
<c-search-results></c-search-results>
</template>
<template if:true={searchDetails}>
<c-search-details></c-search-details>
</template>
<!--content above-->
<!-- footers below -->
<template if:true={searchScreen}>
<footer class="slds-modal__footer">
<button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
<button class="slds-button slds-button_brand" onclick={showSearchResults} title="search">Search</button>
</footer>
</template>
<template if:true={searchResults}>
<footer class="slds-modal__footer slds-modal__footer_directional">
<button class="slds-button slds-button_neutral" onclick={showSearchScreen} title="Refine Search">Refine Search</button>
<button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
<button class="slds-button slds-button_brand" onclick={addPeople} title="Add">Add</button>
</footer>
</template>
<template if:true={searchDetails}>
<footer class="slds-modal__footer slds-modal__footer_directional">
<button class="slds-button slds-button_neutral" onclick={showSearchResults} title="See Results">See Results</button>
<button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>
<button class="slds-button slds-button_brand" onclick={addPeople} title="add">Add</button>
</footer>
</template>
modal.js:
import { LightningElement, tack } from 'lwc';
export default class SearchResults exteends LightningElement{
@track searchScreen = false;
@track searchResults = false;
@track searchDetails = false;
showSearchScreen(){
this.searchScreen = true;
this.searchResults = false;
}
showSearchDetails(){
this.searchResults = true;
this.searchDetails = false;
this.searchScreen = false;
}
showSearchResults(){
this.searchDetails = true;
this.searchResults = false;
}
}
searchResults.js:
import { LightningElement, tack, api } from 'lwc';
export default class SearchResults exteends LightningElement{
@track clickedViewDetails = false;
get options() {
return [{label: '', value: 'option1'}];
@api showDetails(){
this.clickedViewDetails = true;
}
}