I have created an Angular component that displays a toggle-switch. The functionalities of the switch are what I want, i.e. it switches correctly when I click on it. The only extra thing I want to add, is that the initial state is based on a boolean Input variable enableSwitch.
So when I display the toggle switch like this:
<toggle-switch [enableSwitch]="true"></toggle-switch>
I want initially the toggle being enabled (rectangle on the right). When I click on it, I want to toggle to the disabled state, and I want to return the boolean as false.
The same function applies when I want to display the toggle initially being disabled:
<toggle-switch [enableSwitch]="false"></toggle-switch>
I have created a Plunker to demonstrate the problem.
Can anyone help me further?
You can do a two-way binding approach, using ngModel.
<input type="checkbox" [(ngModel)]="enableSwitch">
To instanciate the variable as true, you could do:
#Input() enableSwitch: boolean = true;
The click event would then be obsolete.
Rememeber to include the FormsModule in app.ts.
See forked example:
https://plnkr.co/edit/TIxr6BGrXeVmPYO35DrQ?p=preview
EDIT:
In case of two-way databinding on the component - https://angular.io/guide/template-syntax#two-way-binding---
You first need the banana-in-a-box syntax:
<toggle-switch [(enableSwitch)]="enable"></toggle-switch>
Then you need to use an EventEmitter with the special variable name fooChange where foo is the #Input name.
#Output() enableSwitchChange = new EventEmitter<boolean>();
#Input() enableSwitch: Boolean = true;
Then emit the updated value when the value changes:
update() {
this.enableSwitchChange.emit(this.enableSwitch);
}
To call the update() function you can use change.
<input type="checkbox" [(ngModel)]="enableSwitch" (change)="update()">
Plunkr: https://plnkr.co/edit/Lx7QDbKt6V3HdFJN3bZx?p=preview
This can also be solved simpler without ngModel, but you probably see how yourself. =)
Related
I've a problem with my dropdown. I have several values inside and like to use the selected one. This is my code, which is currently not working. The FormControll is always empty:
app.component.html
<custom-dropdown [formControl]="majorAreaCtrl" (onChange)="onChange()" [label]="'EXPERTS.MAJOR_AREAS'|translate">
<custom-dropdown-item *ngFor="let area of areas" [value]="area.key">
{{ area }}
</custom-dropdown-item>
</custom-dropdown>
app.component.ts
export class ExpertsComponent implements OnInit {
readonly majorAreas = MajorArea
readonly areas = Object.values(this.majorAreas)
readonly majorAreaCtrl = new FormControl()
ngOnInit(): void {
console.log(this.majorAreas, this.allExperts)
}
onChange() {
console.log(this.majorAreaCtrl.value)
}
}
Do anyone see my mistake? Thank you in advance!!
You actually don't need the onChange listener (the [formControl] binding handles that).
However, this requires that your custom-dropdown component implements the ControlValueAccessor interface.
If that's the case, you should be able to respond to changes by subscribing to the this.majorAreaCtrl.valueChanges Observable (for instance).
Here's a small example, albeit without your custom component.
If your component doesn't implement ControlValueAccessor, I (and many others here) would be happy to help you implement it.
(Invalid question. You do not need to refer to it. Thank you.)
Solution : Use a common variable not $event.
I want to run the event on the other buttons.
I use $event, but I can not call function immediately.
.html
<p-fileUpload (onSelect)="runSelect($event)"
accept="image/*" #imageUpload></p-fileUpload>
<button (click)="callImageSelect()" #button2></button>
When button2 is pressed, I want to run (onSelect) event on #imageUpload.
(onSelect) have a parameter. (event.files: List of selected files)
If press button1 to run ,
and I want to put the default value in $event.
So the way I found is to use viewChild.
.ts
#ViewChild('imageUpload') imageUpload;
...
callImageSelect() {
this.imageUpload.**onSelect()**; // In this section, call (onSelect).
}
runSelect(event) {
event.files.push(defalut);
// Here I put the default value for event.
}
Is there a good way?
Thank you for your advice.
What you want is to trigger event onSelect. The point to be noted here is onSelect is not a function but event. You should not call the event instead call the function which actually triggers it.
Since you are using onSelect which is custom event so you must be using some Directive for the same. So what you should do is, access the Directive inside the component and call the function which triggers the event (EventEmitter);
Sue-do code
#Directive(selector="my-directive")
public class MyDirective {
value : string;
onSelect = new EventEmitter();
public selectionMade(){
this.onSelect.emit(value);
}
}
Component html
<button (onSelect)="runSelect($event)" myDirective #myDirective="myDirective"></button>
<button (click)="clickTest()" #button2></button>
Component ts
#ViewChild('myDirective') myDirective : MyDirective;
...
clickTest() {
this.myDirective.selectionMade(); // In this section, call (onSelect).
}
So I have my child component's value marked like so:
#Input flag;
And then in the particular method I have:
myParentComponent.flag = true;
Then in the html of the parent component I have:
<app-childComponent-template [flag] = flag ></app-childComponent-template>
I'm using Chrome's inspection tool to watch the console where I'm logging the changes. When I set the flag to true in the child component it works, however, it won't carry over to the parent component and I can't figure out why. I've gone through this documentation (https://angular.io/guide/component-interaction) multiple times but everything seems to match up accordingly.
Thank you!
The syntax [flag] indicates that it's a one-way data binding: The parent will push changes to flag to the child. But changing the child's #Input flag variable will not emit a change to the parent.
In order to do that, you need to use an #Output in the child component:
#Input('flag') flag;
#Output('flag') flagChanged = new EventEmitter<boolean>();
Then, to inform the parent that the flag has changed, emit an event from the child component:
this.flagChanged.emit(newFlagValue);
Finally, to be informed of changes in the parent component:
<app-childComponent-template [flag]="flag" (flag)="onFlagChanged($event)"></app-childComponent-template>
onFlagChanged(newValue) {
alert(`New flag value: ${newValue}`);
}
I have a form with several component: datagrid, textArea, text input...
For each component FocusIn Event is available.
var objTarget:String;
protected function memo_focusInHandler(event:FocusEvent):void
{
objTarget=event.currentTarget.id;
}
With memo_focusInHandler, I know which has focus.
My goal is to backup last focus objet, and re open Windows with focus on this object.
I try to do this:
objTarget.setfocus();
But it doesn't work. Could you help to found the best way to reach my goal.
String is not a display object, thus it can't be in focus. The representation of string on the stage is a TextField.
In as3 you can set focus to the desired target by using stage method:
stage.focus = myTarget;
Please see the corresponding documentation section: https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#focus
There is no need (that you've shown) to work with the string id reference. It would much simpler (and slightly more efficient) to work directly with the object reference.
var objTarget:Object; // Object instead of type :String
protected function memo_focusInHandler(event:FocusEvent):void {
objTarget = event.currentTarget; //instead of the currentTarget's id property, assign the current target itself
}
Then, when you want to reset focus, you can do:
if(objTarget is TextInput || objTarget is TextArea){ //make sure it's a text input or text area first - optional but recommended if you don't like errors
objTarget.selectRange(objTarget.text.length, objTarget.text.length); //set cursor to the end
objTarget.setFocus(); //focus the text input/area
}
I found a solution:
this[objTarget].selectRange(this[objTarget].text.length, this[objTarget].text.length);
this[objTarget].setFocus();
The following code should write the inverse of true/false as found in the textbox back into the textbox when the button is clicked - but it doesn't work correctly. It will work correctly one way, but not the other (the one that works is whichever ClickHandler was defined last). I've tried using validateNotMatches too but no joy.
If I change the code so that the label's text is updated instead of the textbox's then that works fine.
I am aware of suggested workarounds such as using two buttons, but I just want to know if I'm doing something wrong or if this looks like a bug in GAS. Thanks.
function doGet(e)
{
var app = UiApp.createApplication();
var tb = app.createTextBox().setText('true');
var button = app.createButton('button');
var label = app.createLabel().setText('-');
button.addClickHandler(app.createClientHandler()
.validateMatches(tb, 'true')
//.forTargets(label).setText('false')
.forTargets(tb).setText('false')
);
button.addClickHandler(app.createClientHandler()
.validateMatches(tb, 'false')
//.forTargets(label).setText('true')
.forTargets(tb).setText('true')
);
return app.add(app.createHorizontalPanel().add(tb).add(button).add(label));
}
It's not a bug... both events fire. The validation happens on the current state of the widget, not on the state when the event was fired, so after you flip it to "false" the second handler validates and flips it back to "true".