I have boolean which is the toggleUnit and I have a function which is the onSwitch(). I also used nz-switch for the weather it its Fahrenheit or Celcius
list.component.html
<nz-switch [(ngModel)]="toggleUnit" nzCheckedChildren="°F" nzUnCheckedChildren="°C" (ngModelChange)="onSwitchChange()"></nz-switch>
<div class="weather">
<app-weather></app-weather>
</div>
list.component.ts
toggleUnit: boolean = false;
onSwitchChange() {
switch (this.toggleUnit) {
case true: {
this.toggleUnit = true;
}case false: {
this.toggleUnit = false;
}
}
}
weather.component.ts
ngOnInit() {
//console.log(this.toggleUnit);
//trying to get the parent ``toggleUnit`` value, if its true or false
}
You'll have to pass the value to your child component
list.component.html
<nz-switch [(ngModel)]="toggleUnit" nzCheckedChildren="°F" nzUnCheckedChildren="°C" (ngModelChange)="onSwitchChange()"></nz-switch>
<div class="weather">
<app-weather [toggleUnit]="toggleUnit"></app-weather>
</div>
weather.component.ts
#Input() toggleUnit: boolean;
ngOnInit() {
//console.log(this.toggleUnit);
//trying to get the parent ``toggleUnit`` value, if its true or false
}
ngOnChanges(value) {
// called when toggleUnit is updated from parent
console.log(value);
console.log(this.toggleUnit);
}
Related
I am trying to pass the radio button value to its parent
here is the example:
Child
<template>
<radio v-model="type" value="TypeOne" #change="TypeOne()"></el-radio>
<radio v-model="type" value="TypeTwo" #change="TypeTwo()"></el-radio>
</template>
<script>
export default {
methods: {
TypeOne() {
this.$emit('input', 'TypeOne');
},
TypeTwo() {
this.$emit('input', 'TypeTwo');
}
}
}
</script>
parent
<template>
<component #input="onTypeChange"></component>
<div v-show="type"></div>
<div v-show="!type"></div>
</template>
<script>
export default {
data() {
return {
type: 'true',
};
},
methods: {
onTypeChange () {
var TypeOne = false
var TypeTwo = false
if (TypeOne == TypeOne) {
this.type = false;
} else if (TypeTwo == TypeTwo) {
this.type = true;
} else {
console.log('typeChanged');
return false;
}
}
}
}
</script>
I am trying to use radio data to hide or show some element in the parent component. in initial selection it works but after radio selection is changed it does not update the parent. How can I make the radio data reactive in my case?
You passed a parameter when you called this.$emit('input', 'TypeOne');
but the method emitted is not accepting a parameter.
Add a parameter on onTypeChange() and use the parameter on your logic
onTypeChange (type) {
if (type == 'TypeOne') {
this.type = false;
} else if (type == 'TypeTwo') {
this.type = true;
} else {
console.log('typeChanged');
return false;
}
}
Here's the code:
parent.ts
newInputName = '';
inputName = '';
addName = false;
constructor() {
private modal: NzModalService) { }
ngOnInit() {
this.modal.afterAllClose.subscribe(md => {
console.log(this.addArea)
});
}
addItem(): void {
this.inputName = this.name;
this.newInputName = '';
this.addName = true;
}
parent.html
<div class="modal-body">
<label class="pb-2">Name</label>
<input nz-input class="mr-2" [(ngModel)]="newInputName" placeholder="Type name...">
</div>
<nz-divider></nz-divider>
<section class="form-footer" nz-row>
<div nz-col>
<button class="mr-1" nz-button nzType="primary" type="button" (click)="addItem()"
[disabled]="newInputName.length <= 0">Add Name</button>
<button nz-button class="btn-secondary" type="button" (click)="modalRef.close()"
[textContent]="'Cancel' | translate"></button>
</div>
</section>
child.ts
#Input() addName: boolean;
editLayout(shopFloor?: any, lines?: any) {
this.modalRef = this.modal.create({
......
.....
.....
.......
.......
});
this.modal.afterAllClose.subscribe((x: any) => {
this.addName = false;
});
}
What I'm trying to do here is after submitted, the modal will be closed then the value addArea will be changed to false if the value of addName is true.
cause I'm having trouble when I try to save/submit the value still true when I try to change the value of addArea to true.
I also tried to do like this:
parent.html
<app-child [addNewName]="addName"></app-child>
child.ts
#Input() addName: boolean;
#Output()
addNameChange = new EventEmitter<boolean>();
#Input() addName: boolean;
editLayout(shopFloor?: any, lines?: any) {
this.modalRef = this.modal.create({
......
.....
.....
.......
.......
});
this.modal.afterAllClose.subscribe((x: any) => {
this.addNameChange.emit(!this.addName);
});
}
But still it doesn't work.
You were almost there, on top of what you already tried (adding event emitter and emitting when the modal is done and ready to tell the parent component what to do), you also have to tell the parent component to do something when the child emits, adding the following to your parent html template:
<app-child [addNewName]="addName" (addNameChange)="resetNameChange($event)"></app-child>
and then in your parent .ts file:
...
resetNameChange(val) {
...do logic here, probably this.addName = val;
}
Hi all and thank for helping :)
Context :
In my child i want pass a boolean to the parent for hidden a component in the parent if user clicked
in my child component ( name : connexionDesktop ) :
<button v-on:click="$emit(childMessage)"> Start </button>
data () {
return {
childMessage: true
}
}
in the parent i try :
<connexionDesktop v-if="fromChild == false " v-on:childToParent="childMessage"> </connexionDesktop>
data () {
fromChild:false
}
methods: {
childMessage (value) {
alert('from child' + value );
this.fromChild = value
}
}
but that's not working ... i think i am a noob :D i can't send a message from child to parent ^^""
can you help me ? thank a lot
The first argument for the $emit method should be the event name. So your code should look better like this:
// child component
<template>
<button v-on:click="handleClick"> Start </button>
</template>
<script>
export default {
data () {
return {
childMessage: true
}
},
methods: {
handleClick() {
this.$emit('update:parent', this.childMessage)
}
}
}
</script>
Then in the parent component, you listen for the event and pass in the value the child emitted to a local value of the parent like so:
<template>
<connexionDesktop v-if="fromChild == false" #update:parent="fromChild = $event">
</connexionDesktop>
</template>
<script>
export default {
data () {
return {
fromChild: false
}
},
}
</script>
As it's stated in the docs on $emit here, the first parameter is the custom event name.
You can do something like this:
<button v-on:click="$parent.$emit('childToParent', childMessage)"> Start </button>
data () {
return {
childMessage: true
}
}
and in the parent:
<connexionDesktop v-if="fromChild == false " v-on:child-to-parent="childMessage"> </connexionDesktop>
...
data () {
fromChild:false
}
methods: {
childMessage (value) {
alert('from child' + value );
this.fromChild = value
}
}
...
I want to update the todoList in my PARENT COMPONENT after I have added a new item in my child using the AddItem() method. Nothing gets added the first time.
EX. if I add "take test" doesn't get render, then if I add "take shower" doesn't get rendered but now "take test" does. Then if I add "take a leak" "take shower" gets rendered.
PARENT COMPONENT
firstUpdated(changedProperties) {
this.addEventListener('addItem', e => {
this.todoList = e.detail.todoList;
});
}
render() {
return html`
<p>Todo App</p>
<add-item></add-item>//Child item that triggers the add
<list-items todoList=${JSON.stringify(this.todoList)}></list-items>
`;
}
CHILD COMPONENT
AddItem() {
if (this.todoItem.length > 0) {
let storedLocalList = JSON.parse(localStorage.getItem('todo-list'));
storedLocalList = storedLocalList === null ? [] : storedLocalList;
const todoList = [
...storedLocalList,
{
id: this.uuidGenerator(),
item: this.todoItem,
done: false
}
];
localStorage.setItem('todo-list', JSON.stringify(todoList));
this.dispatchEvent(
new CustomEvent('addItem', {
bubbles: true,
composed: true,
detail: { todoList: storedLocalList }
})
);
this.todoItem = '';
}
}
render() {
return html`
<div>
<input .value=${this.todoItem} #keyup=${this.inputKeyup} />
<button #click="${this.AddItem}">Add Item</button>
</div>
`;
}
You need to set properties for todoItem
static get properties() {
return {
todoItem: {
type: Array,
Observer: '_itemsUpdated'
}
}
constructor(){
this.todoItem = []
}
_itemsUpdated(newValue,oldValue){
if(newValue){
-- write your code here.. no event listeners required
}
}
In above code., We need to initialise empty array in constructor.
Observer observe the changes to array & triggers itemsUpdated function which carries oldValue & NewValue. In that function., you can place your logic.
No Event Listeners required as per my assumption
Found my error. I was passing to detail: { todoList : storedLocalList } which is the old array without the updated value.
AddItem() {
if (this.todoItem.length > 0) {
let storedLocalList = JSON.parse(localStorage.getItem('todo-list'));
storedLocalList = storedLocalList === null ? [] : storedLocalList;
const todoList = [
...storedLocalList,
{
id: this.uuidGenerator(),
item: this.todoItem,
done: false
}
];
localStorage.setItem('todo-list', JSON.stringify(todoList));
this.dispatchEvent(
new CustomEvent('addItem', {
bubbles: true,
composed: true,
detail: { todoList: todoList }
})
);
this.todoItem = '';
}
}
I am currently building a react app where I need a form with the pre-populated values in it when a user wants to update his/her profile. In the add new user form, It's fine to have the drop-down in its default state. But when a user wants to update profile then there is a project and a group dropdown that needs to have a default value i.e. the value when the user was created. Means the drop-down should be populated with the project and the group associated with it.
<Select
multi={true}
simpleValue
required
value={value}
options={[{value:'One', label:'PROJECTONE'},{value:'Two', label:'PROJECTTWO'}]}
onChange={handleInputChange}
/>
So I need a dropdown with the prepopulated projects i.e. PROJECTONE and PROJECTTWO both.
This is the ScreenShot of my update profile. I have the value which I want to set in the dropdown but if I set comma separated string then when I want to remove that option it is not being affected i.e. I am not able to remove that option.
Question Update 1:
So here is my full component
export interface IInputProps {
required?: boolean;
type: string;
placeholder?: string;
menuItems?: Object[];
isDisabled?: boolean;
onSelect?: (value) => void;
defaultValue?: string;
id?: string;
multi?: boolean;
searchable?: boolean;
}
export interface IInputState {
value: string;
}
export class Input extends React.PureComponent<IInputProps, IInputState> {
constructor({ defaultValue }) {
super();
this.state = { value: (defaultValue || '')};
}
componentWillReceiveProps(nextProps) {
if (!nextProps.defaultValue) {
return;
}
const { state: { value } } = this;
if (nextProps.defaultValue !== value) {
this.setState({
value: nextProps.defaultValue
});
}
}
handleInputChange = (selectedValue) => {
this.setState({
value: selectedValue,
});
}
get value() {
return this.state.value;
}
render() {
const { props: { searchable, multi, id, menuItems, required, isDisabled, placeholder, type, defaultValue },
state: { value, dropDownValue }, handleInputChange } = this;
return (
<Select
multi={multi ? multi : false}
simpleValue
searchable={searchable ? searchable : false}
disabled={isDisabled ? isDisabled : false}
required
value={value}
placeholder={placeholder ? placeholder : 'Select...'}
options={menuItems}
onChange={handleInputChange}
/>
);
}
}
}
I am using this input component whereever I need a Select Input and passing the props.
When I use this component as..
<Input
multi={true}
defaultValue="PROJECTONE,PROJECTTWO"
ref="myProjects"
id="myProjects"
menuItems={[{value:'One', label:'PROJECTONE'},{value:'Two', label:'PROJECTTWO'}]}
/>
Then nothing is being set in it's value.
I am using component will recieve props to check if there is any default value passed if it is passed then I am setting the value.
And Once the value is being set on the dropdown I can not remove it using it's cross button that's the main problem here.
There is a problem in your componentWillReceiveProps function:
```
componentWillReceiveProps(nextProps) {
if (!nextProps.defaultValue) {
return;
}
const { state: { value } } = this;
if (nextProps.defaultValue !== value) {
this.setState({
value: nextProps.defaultValue
});
}
}
```
This function can be caused by changes to props or state.
You check nextProps.defaultValue !== value in here, once you check an option of the select, it's value may not be equal to the nextProps.defaultValue, then you always set the value state to the defaultValue, so you can not get the right value of the option.
You need also check whether the nextProps.defaultValue and the this.props.defaultValue is same or not, so that you will get the right changed value:
```
componentWillReceiveProps(nextProps) {
if (!nextProps.defaultValue) {
return;
}
const { state: { value } } = this;
if (nextProps.defaultValue !== value && nextProps.defaultValue !== this.props.defaultValue) {
this.setState({
value: nextProps.defaultValue
});
}
}
```