Here i have requirement like if i type type anything in Textbox it should be Reflect back to Component
<label> Search FRom Table:</label> <input (change)="someval()">
Someval(){
//Here i need that TextBox value
}
You can achieve this in Two way data binding method and so on.
Html Looks like following
<label> Search From Table:</label>
<input name="searchTxt" [(ngModel)]="searchTxt" (input)="someval()">
{{searchTxt}} <!-- here iam printed html file also -->
Typescript File:
//Add one variable
public searchTxt:any;
someval(){
console.log("Here iam printed variable",this.searchTxt);
}
Make sure you have to import Forms Module in app module file
other wise it show error like this
app.module.ts
import { FormsModule } from '#angular/forms'
imports: [
FormsModule,
],
For more details about related here, please visit:
https://www.code-sample.com/2017/05/angular2-input-textbox-change-events.html
Angular 2 change event on every keypress
Related
I would like to start an animation on user interaction with matRipple attribute directive.
I have tried it with <i matRipple class="material-icons">create</i> and imported MatRippleModule from #angular/material, like this:
import { MatRippleModule } from '#angular/material';
imports: [
MatRippleModule
]
If I click on the element, nothing happens and I don't even get an error message. Why doesn't it work for me?
I have figured out that I didn't see any changes because of the background color. I have added matRippleColor="orange" and now I see that it works.
I have created a website angular7 i which i am using [ngxTimepicker] for select time.i have get the selected value after select from timepicker.i have used [(ngModel)] but i got following error in the console :
Error: Cannot assign to a reference or variable!
tell me anyone how to use [(ngModel)
] with [ngxTimepicker] and fire function after select value from model.check my below fiddle and tell what the wrong in my code?
<div class="col-sm-6">
<input aria-label="default time" [ngxTimepicker]="mStartTime" [value]="'05:11 pm'" [(ngModel)]="mStartTime"
(focusout)="setData()" readonly>
<ngx-material-timepicker #mStartTime></ngx-material-timepicker>
</div>
In the .ts file
Use this
export class Component implements OnInit {
#ViewChild("YOURTIMEPICKERNAME") ANYVARIABLE: ElementRef;}
To get the time value use:
onClick() {
console.log(this.ANYVARIABLE.time);}
ANGULAR JINDABAD!!!
I have a set of form fields that are in a dynamically created component. The parent Component owns the form tag. However, none of the form fields are being added to the Form. I'm using the ComponentFactoryResolver to create the component:
#Component({
selector: 'fieldset-container',
templateUrl: './fieldset-container.component.html',
styleUrls: ['./fieldset-container.component.scss'],
entryComponents: ALL_FIELD_SETS,
})
export class FieldsetContainerComponent<C> {
fieldsetComponent : ComponentRef<any> = null;
#Input() formGroup : FormGroup;
#ViewChild('fieldSetContainer', {read: ViewContainerRef})
fieldsetContainer : ViewContainerRef;
#Output() onComponentCreation = new EventEmitter<ComponentRef<any>>();
constructor(private resolver : ComponentFactoryResolver) {
}
#Input() set fieldset( fieldset : {component : any, resolve : any }) {
if( !fieldset ) return; // sorry not right
// Inputs need to be in the following format to be resolved properly
let inputProviders = Object.keys(fieldset.resolve).map((resolveName) => {return {provide: resolveName, useValue: fieldset.resolve[resolveName]};});
let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
// We create an injector out of the data we want to pass down and this components injector
let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.fieldsetContainer.parentInjector);
// We create a factory out of the component we want to create
let factory = this.resolver.resolveComponentFactory(findComponentForFieldset(fieldset.component));
// We create the component using the factory and the injector
let component : ComponentRef<any> = factory.create(injector);
// We insert the component into the dom container
this.fieldsetContainer.insert(component.hostView);
// Destroy the previously created component
if (this.fieldsetComponent) {
this.fieldsetComponent.destroy();
}
this.fieldsetComponent = component;
this.onComponentCreation.emit( this.fieldsetComponent );
}
}
The template:
<div #fieldSetContainer [formGroup]="formGroup"></div>
The usage of the dynamic component:
<form class="form" #omaForm="ngForm">
<div *ngFor="let fieldset of page?.fieldsets">
<fieldset-container [fieldset]="{ component: fieldset, resolve: {} }" (onComponentCreation)="onComponentCreation($event)" [formGroup]="omaForm.form"></fieldset-container>
</div>
</form>
I suspect it has something to do with the injector not being hooked up correctly, but from what I can tell it is chained to the parent. I've set a breakpoint in NgModel and it is passed a null for parent which is the problem. I traced that back up into something that looks compiled and it was just hard coding a null. So I'm not sure how that was created with hard coded nulls in there.
Any ideas on how to fix this?
Ok it turns out it has nothing to do with the dynamic nature of this component. I removed it and defined all of my components inline and it still had the problem. The issue was that having form controls inside a Component that were nested within a form tag is just not supported by Angular out of the box. Once you nest a form control in a component it can't see the NgForm anymore which is crazy.
After reading solutions on the web and seeing that no one had a good solution I designed 2 of my own directives that registered the Form into the DI container up at the NgForm, then using DI hierarchy I could inject that into another Directive that would perform the registration below.
Parent Component Template:
<form nested>
<my-component .../>
</form>
Child Component Template:
<div>
<input name="street" [(ngModel)]="address.street" required nest/>
<input name="city" [(ngModel)]="address.city" required nest/>
<input name="state" [(ngModel)]="address.state" required nest/>
<input name="zip" [(ngModel)]="address.zip" required nest/>
</div>
Once I had this in place then I could bring back my dynamic component and it worked perfectly. It was just really hard to get there.
It's really elegant and simple and doesn't require me to pass the form instance down through the layers like so many suggestions on the web show. And the work to register a form control whether it's 1 layer or 999 layers removed is the same.
IMHO NgForm and NgModel should just do this out of the box for us, but they don't which leads to complicated architecture design to accomplish moderately advanced forms.
app_element.dart
library attribute_binding.app_element;
import 'package:angular2/angular2.dart';
import 'package:attribute_binding/app_element.dart';
#Component(selector: 'app-element', templateUrl: 'app_element.html')
class AppElement {
#Input() String attr2 = 'foo';
}
app_element.html
<h2>app-element</h2>
<div my-attr="attr1">attr1</div>
<div [my-attr]="attr2">attr2 {{attr2}}</div>
so that both <div> get a green background color?
With the code above only the first <div> gets a green background.
If you want to bind to an attribute instead of a property of the element, you must use the form [attr.my-attribute]="expression".
For more info about it you can see the official cheatsheet and Template syntax - Attribute, Class, and Style Bindings from the official doc as well.
Regarding your finding, that seems to be from an old PR (15 July) and see that it's not being even exported, and most important you can't find that const anymore in the latest master (see dom_renderer).
Glad it helped.
Input texts are inserted in the DOM using an iterable repeat like the following:
HTML:
<template repeat="value in listValue">
<input type="text" bind-value="listValue[$index]">
</template>
Dart:
List listValue = toObservable(["value one", "value two"]);
There is a problem with the focus: when a letter is typed in any of the input field, the DOM is redisplayed and the focus is lost. This is due to focus bug
How could I have this working?
The focus problem is a result that WebUI currently considers changes to individual entries in a list as a general change to the list itself, so it re-renders the entire template-repeat on every edit. You can get the behavior you want by adding one level of indirection. The idea here is to make it easier to distinguish changes to values from changes to the list.
For instance, instead of having list of string values, make it a list of observable references to string values, as follows:
html:
<template repeat="value in listValue">
<input type="text" bind-value="value.value">
</template>
dart:
import 'package:web_ui/web_ui.dart';
List listValue = toObservable([]);
void main() {
listValue.add(new ObservableReference("value one"));
listValue.add(new ObservableReference("value two"));
}