This might be answered, but damn if I can find it . I am creating a module, and its working, the issue is I want to assign a property to another property on my module.
so in angular 2 (with ng-module) I have created a simple panel
<simple-panel name="MyPanel"></simple-panel>
I have it working great, the issue is I want to assign a property to the name Property now and I have no idea what is the best way to do this.
so I would like to return {{MyPanel.thisProperty}} for use on the page where I am calling the tag.
here is a sample of what I am doing, stripped down for this question
here is my simple-panel.ts
import {Component,NgModule,ModuleWithProviders, Directive, Input} from '#angular/core';
/**
* Content of the edit panel.
*/
#Directive({
selector: 'simple-panel-edit-panel-content'
})
export class SimplePanelEditPanelContent {}
#Component({
selector: 'simple-panel',
templateUrl: 'simple-panel.html',
styleUrls: ['simple-panel.css'],
encapsulation: ViewEncapsulation.None
})
export class SimplePanel{
private _name: string;
private _announceedit: boolean = false;
private _buttonname: string = 'edit';
/** This sets the Name as a variable that can be used. */
#Input()
get name(): string { return this._name; }
set name(value) { this._name = value; }
/**Sets the Edit Announcement */
#Input()
get editannounce(): boolean { return this._announceedit; }
set editannounce(value: boolean) {
if (!value) {
this._announceedit = true;
this._buttonname = 'search';
}else{
this._announceedit = false;
this._buttonname = 'edit';
}
}
}
#NgModule({
exports: [SimplePanel,SimplePanelEditPanelContent],
declarations: [SimplePanel,SimplePanelEditPanelContent],
})
export class SimplePanelComponent {
static forRoot(): ModuleWithProviders {
return {
ngModule: SimplePanelComponent,
providers: []
};
}
}
here is the simple-panel.html
<md-card>
<md-card-title-group>
<button md-raised-button (click)="editannounce=editannounce;"><md-icon>{{ _buttonname }}</md-icon></button>
</md-card-title-group>
<md-card-content>
<ng-content select="simple-panel-edit-panel-content"></ng-content>
</md-card-content>
<md-card-actions>
<button md-raised-button (click)="editannounce = editannounce"><md-icon>save</md-icon> SAVE</button>
</md-card-actions>
</md-card>
when someone uses the module, a panel is created with a button
when someone clicks the button I can access the variable within the template above, but what I want to do is actually access a variable that is used on the page itself where they call the module to use. it would be nice to have it named MyPanel.announceedit or MyPanel.editable as an example, but the main thing is that a variable is created, and watched, when it changes it passes it back up to where the module is bieng used and allows user the ability to access it within the content area, so if they added an input and wanted to see if the button was clicked to set the readOnly attribute they could. Hopefully this makes more sense.
If you write it like
<simple-panel [name]="MyPanel"></simple-panel>
in the component that includes this html, you can access/set MyPanel with a simple this.MyPanel.
And in your SimplePanel component
#Input() name;
...
this.name = "something";
is again all you need to set and get that field.
Related
I have my app.component with a list of objects
class Hero {
alias: string;
constructor(public firstName: string,
public lastName: string) {
}
}
class AppComponent {
...
heroes: Hero[] = [
new Hero("foo", "bar")
];
...
onHeroChange($event: Hero, index: number): void {
this.heroes[index] = $event;
}
<div *ngFor="let hero of heroes; let index=index">
<hero [hero]="hero" (heroChange)="onHeroChange($event, index)"></hero>
</div>
The HeroComponent is
export class HeroComponent {
#Input()
set hero(newValue: Hero) {
this._hero = newValue;
this.showAlias = !!newValue.alias;
}
get hero(): Hero {
return this._hero;
}
#Output() heroChange: EventEmitter<Hero> = new EventEmitter<Hero>();
showAlias: boolean = !1;
private _hero: Hero;
//
#HostListener('click')
onHeroClick(): void {
this.hero.alias = `alias_${+new Date()}`;
console.info('HERO TO EMIT', this.hero);
this.heroChange.emit(this.hero);
}
}
My problem is that even by assigning the changed hero in app.component, the set hero inside hero.component is not called, so showAlias in the example is not updated and I don't see the alias in the hero.component.
Do I need to force the ngFor by assigning the entire array?
Maybe a workaround could be removing the object from the array and then inserting again?
Sounds like useless computation though.
Note: this is just an example, it's not what I'm really working on, so something like
Update the showAlias prop in the onHeroClick method
or
Assign hero in the hero.component
unfortunately don't solve the issue. I need the changes to be on the outside because other stuff happens.
Could be another option changing the detection to onPush and marking for check manually?
Blitz ==> https://stackblitz.com/edit/angular-ivy-kpn3ds
You're not setting a new hero, you're just modifying a property on the existing one:
this.hero.alias = `alias_${+new Date()}`;
That doesn't fire the setter. Change the line like this:
this.hero = {...this.hero, alias: `alias_${+new Date()}`};
I've jumped for a while from Angular 6 to Angular JS and I'm trying to code in Component Architecture. The problem is - I'm trying to use ng-show="somevariable" to hide / show a div.
AppRootModule:
export const appRootModule: IModule = module('datawalk', ['asyncFilter'])
.component('appRoot', new AppRootComponent())
.component('postModal', new PostModalComponent())
.service('componentsDataService', ComponentDataService);
PostModalComponent:
export class PostModalComponent {
public template: string;
public controller: Injectable<IControllerConstructor>;
public controllerAs: string;
constructor() {
this.controller = PostModalController;
this.controllerAs = 'postM';
this.template = PostModalTemplateHtml;
}
PostModalController
export class PostModalController implements IController {
public modalVisible: boolean;
/../
constructor(componentsDataService: ComponentDataService) {
/../
this.modalVisible = false;
/../
this.$cds.getModalData().subscribe((data: any) => {
if (data.showMod === true) {
this.modalOpen(data);
}
});
}
public $onInit = async (): Promise<void> => {};
public modalOpen(post: any): void {
console.error(this.modalVisible); // false
this.modalVisible = true;
console.error(this.modalVisible); // true
/../
}
And the template:
<div class="modal" ng-show="modalVisible">
<div class="modal-body">
/../
</div>
</div>
Anyone can tell me what I'm doing wrong?
console logs shows that the variable changes, but nothing happen, modal div is still hidden.
OK. So I've figured it out.
That's not a problem of code, but the problem is inside my IDE.
WebStorm has an issue - it does not recognize a controllerAs property in HTML templates of AngularJS in component architecture.
Also tslint works faulty.
I don't recommend to use that with AngularJS with component architecture.
Vs Code works perfect with that.
I would like to bind an input value to the model using getter and setters. In this way i can prevent and/or manipulate the input's value while writing inside it.
For example i want the prevent numbers inside an input box. So, if write 'abc' all is ok, then if I start writing a number nothing should happen (to the model and to the input's value). The issue is that with the following code i'm able to write anything inside the input box (but the model it's correct). This means that the input box value is not really representing my model.
NOTE: The reason beyond this questions is that I want to use my models to validate forms, preventing for example specific characters. I would like to not use reactive forms as i want to keep my validations inside my models not components. Also note that in a real scenario i would have a UserModel class with inside name and other fields with their validations.
#Component({
selector: 'my-app',
template: `
<div>
<h2><input type="text" [(ngModel)]="name"> {{name}}</h2>
</div>
`,
})
export class App {
_name:string = 'ss';
constructor() {
}
// In real scenario those 2 methods are in a separate class UserModel
get name() {
return this._name;
}
set name() {
if ((new RegExp(/^[a-zA-Z]*$/).test(val))) {
this._name = val;
}
}
}
If you manipulate the value in the setter, this can cause issues with change detection, so that ngModel doesn't pick up the changes and doesn't update the <input>
To work around you can use
export class App {
_name:string = 'ss';
constructor(private cdRef:ChangeDetectorRef) {}
get name() {
return this._name;
}
set name(value:String) {
this._name = value + 'x';
this.cdRef.detectChanges()
}
}
if you reset the value to the previous value, you might need to pass an artificial different value first, otherwise change detection won't detect a change and even detectChanges() won't update the input.
set name(value:String) {
var oldVal = this._name;
this._name = null;
this.cdRef.detectChanges()
this._name = oldVal;
this.cdRef.detectChanges()
}
Based on #Günter Zöchbauer answer i made a workaround. It's not definitive and could be more abstract, but for now it's ok.
export class App implements OnInit {
#Input() userModel: UserModel = null;
public _vm;
constructor(private _changeDetectionRef: ChangeDetectorRef) {
}
/**
* Initalize view model, it's important to keep names specular
*/
ngOnInit() {
this._vm = {
name: this.userModel.name,
surname: this.userModel.surname,
};
}
/**
* Helper for avoid detectchanges inside the modal, and reduce boilerplate. We could also ad an interface/type of the possibile field value, ie type fieldT= 'name' | 'surname';
* #param field
* #param val
*/
protected updateModel(field, val: string): void {
this._vm[field] = null;
this._changeDetectionRef.detectChanges();
this.userModel[field] = val;
this._vm[field] = this.userModel[field];
this._changeDetectionRef.detectChanges();
}
}
In userModel:
....
public get name(): string {
return this.name';
}
public set name(val: string) {
if ((new RegExp(/^[a-zA-Z]*$/).test(val))) {
this.name = val;
}
}
In template:
<input type="text" name="userName" [ngModel]="_vm.name" (ngModelChange)="updateModel('name', $event)">
You can use (ngModelChange) and [ngModel] to test the content of your model upon change.
As you can see in this Plunker the model wont change if it is not valid.
#Component({
selector: 'my-app',
template: `
<div>
<h2><input #input type="text" [ngModel]="name" (ngModelChange)='valid(input.value)'> {{name}}</h2>
</div>
`,
})
export class App {
name:string = 'ss';
constructor() {
}
valid(value){
if(value){ //<--- Your test here
this.name = value;
}
}
}
According to the Angular 1.5 documentation components should only control their own View and Data.
Instead of changing properties of objects passed to the component, a component should create an internal copy of the original data and use callbacks to inform the parent component when this copy has changed.
In this plunk I created a small demo illustrating my problem.
interface IStudent {
id: number,
name: string;
}
/* SERVICE: StudentService */
public class StudentsService {
static $inject = ['$q'];
constructor(private $q: ng.IQService) {
}
public getStudents() : ng.IPromise<IStudent[]> {
return this.$q.when([
{ id: 1, name: 'Adam' },
{ id: 2, name: 'Ben' }
}]);
}
}
/* COMPONENT: student */
class StudentsComponent implements ng.IComponent {
public template = `<student-list on-selected="$ctrl.onSelected(student)"></student-list>
<edit-student student="$ctrl.student" ng-show="$ctrl.student" on-changed="$ctrl.copyChanged(copy)"></edit-student>`;
public controller = StudentsController;
}
class StudentsController {
private student: IStudent;
protected onSelected(student: IStudent) {
this.student = student;
}
protected copyChanged(copy: IStudent) {
this.student.name = copy.name;
}
}
/* COMPONENT: student-list */
class StudentListComponent implements ng.IComponent {
public template = '<ul><li ng-repeat="student in $ctrl.students"><a ng-click="$ctrl.onClick(student)">{{ student.name }}</a></li></ul>';
public controller = StudentListController;
public bindings : any = {
onSelected: '&'
}
}
class StudentListController {
protected students: IStudent[];
static $inject = ['studentsService'];
constructor(private studentsService: StudentsService) {
}
public $onInit() {
this.studentsService.getStudents().then(data => this.students = data);
}
protected onClick(student: IStudent) {
this.onSelected({ student: student });
}
}
/* COMPONENT: edit-student */
class EditStudentComponent implements ng.IComponent {
public template = `<form class="form">
<div class="input-group">
<label for="#" class="control-label">Original</label>
<input type="text" class="form-control" ng-model="$ctrl.student.name" readonly>
</div>
</form>
<form class="form">
<div class="input-group">
<label for="#" class="control-label">Copy</label>
<input ng-change="$ctrl.changed()" type="text" class="form-control" ng-model="$ctrl.copy.name">
</div>
</form>`;
public controller = EditStudentController;
public bindings :any = {
student: '<',
onChanged: '&'
};
}
class EditStudentController {
protected copy: IStudent;
public $onInit() {
console.log('EditStudentComponent.$onInit', this.student);
}
public $onChange() {
console.log('EditStudentComponent.$onChange', this.student);
this.copy = angular.copy(this.student);
}
protected changed() {
console.log('EditStudentController.changed', this.copy);
this.onChanged({ copy: this.copy });
}
}
/* Bootstrap */
angular
.module('app', [])
.component('students', new StudentsComponent())
.component('studentList', new StudentListComponent())
.component('editStudent', new EditStudentComponent())
.service('studentsService', StudentsService)
;
angular.bootstrap(document, ['app']);
I have a list iterating over students. When the user selects a student, a textbox is shown in which the user can change the name of the student. Whenever the name changes, this change is propagated to the parent component which updates the list.
The problem is that after selecting a student in the list, the edit-user component is not initialized and still shows the name of the copy created when the component was created (null).
Can someone tell me how to fix this plunk such that, when clicking a student in the list, the edit component gets initialized with a copy of the selected student?
Edit: changed the plunk, as I accidentally removed the script tag instead of the style tag.
I thought this plunk represented my problem, but alas it didn't. The plunk didn't work because I implemented $onChange instead of $onChanges. I fixed the plunk such that it works as expected.
The cause of my original problem was a completely different one. In my business application I used another component with a ng-transclude directive around my edit component, like this:
<modal-editor>
<edit-student data="$ctrl.data">
<edit-student>
</modal-editor>
As the edit-student component was defined in the isolated scope of the modal-editor component, it didn't receive any changes made to the data variable in the outer scope (but somehow it could still access the data from this outer scope).
After modifying the modal-editor component such that it passed the data to the child component, everything worked as expected:
<modal-editor data="$ctrl.data">
<edit-student data="$ctrl.data">
<edit-student>
</modal-editor>
In Angular 1 we avoided calling functions from within template expressions in excess, e.g. ng-repeat="item in vm.getFilteredItems()" because property changes unrelated to the result of getFilteredItems would cause the function to recompute repeatedly and unnecessarily on digests, which commonly causes performance problems at scale. Instead we bound to objects, and compute based on events (e.g. ng-repeat="item in vm.filteredItems).
In Angular 2, the dirty checking process has been optimized but functions called in component templates will still be called when any properties at the component level change, regardless of whether the function is dependent on those properties. I expect this could lead to the same performance issues if used improperly.
Here is a simplified example of the differing approaches in Angular 2:
// function binding in template
#Component({
selector: 'func',
template: `
<input [(ngModel)]="searchTerm" placeholder="searchTerm" />
<div *ngFor="let name of filteredNames(searchTerm)">{{name}}</div>
`
})
export class FuncComponent {
#Input() names:string[];
filteredNames(searchTerm) {
if (!searchTerm) return this.names;
let filteredNames = [];
return this.names.filter((name) => {
return name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
});
}
}
-
// no function binding
#Component({
selector: 'nofunc',
template: `
<input [(ngModel)]="searchTerm" (ngModelChange)="search($event)" placeholder="searchTerm" />
<div *ngFor="let name of filteredNames">{{name}}</div>
`
})
export class NoFuncComponent implements OnInit {
#Input() names:string[];
searchTerm: string;
ngOnInit() {
this.search(this.searchTerm);
}
search() {
if (!this.searchTerm) {
this.filteredNames = this.names;
return;
}
this.filteredNames = this.names.filter((name) => {
return name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
});
}
}
http://plnkr.co/edit/AAFknlJgso3D8F1w3QC1?p=preview
Is this still a concern in Angular 2? Which approach is preferred, and why? Thanks!
You could create a pipe. Pipes (if pure) are only called when depending values change.
#Pipe({
name: 'search',
// pure: 'false'
})
class SearchPipe {
transform(names, searchTerm) {
if (!this.searchTerm) {
this.filteredNames = names;
return;
}
return names.filter((name) => {
return name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
});
}
}
#Component({
selector: 'func',
pipes: [SearchPipe],
template: `
<input [(ngModel)]="searchTerm" placeholder="searchTerm" />
<div *ngFor="let name of names | search:searchTerm">{{name}}</div>
`
})
export class FuncComponent {
#Input() names:string[];
}
If the pipe needs to recognize changes in names then pure needs to be disabled.
If names is replaced by a different instance instead of just members being added or removed, then pure works fine and the pipe is only executed when names or searchTerm changes.
Hint
In devMode (default) change detection runs twice and the pipe will be called twice as much as expected.