Application Rules

Application Rules

Let's make sure Application.oss (src/app/rules/Application.oss) exists this will be place for our global rules and we have already User.oss (src/app/rules/User.oss) directory we are going to add following

New rule
Complete rule file
New rule
field=age editable=false {
component:AgeRatingComponent;
bindings: {
value:$value;
}
}
Complete rule file
We also added field 'age' to zLeft
class=User {
field=uniqueName {
label:"Id";
}
field=description {
trait:longtext;
}
field=age editable=false {
component:AgeRatingComponent;
bindings: {
value:$value;
};
}
zNone => *;
zLeft => uniqueName => name => description => created => age => isAngularDeveloper;
}
class= User {
operation=(edit, create) {
zNone => *;
zLeft => name => description => age;
}
operation=(create) {
zNone => *;
zLeft => name => description => created => isAngularDeveloper;
}
}

As you can see above we are setting custom component for our field age. Todo so we need to create new Angular component AgeRatingComponent.

Run following command:

$ ng g c AgeRating --inlineStyle=true --inlineTemplate=true \
--project=my-metaui-app --skipTests=true

Update the created component to match code below:

src/app/age-rating/age-rating.component.ts
src/app/age-rating/age-rating.component.ts
import {Component, Input, OnInit} from '@angular/core';
import {BaseComponent, Environment} from '@ngx-metaui/rules';
@Component({
selector: 'app-age-rating',
template: `
<span class="w-string-field">
{{rating}}
</span>
`
})
export class AgeRatingComponent extends BaseComponent implements OnInit {
@Input()
value: any;
rating: string;
constructor(protected environment: Environment) {
super(environment);
}
ngOnInit(): void {
this.rating = (!this.value) ? 'N/A' : ((this.value && this.value <= 20) ? 'Young' : 'Good');
}
}

To be able identify the component type when MetaUI tries to instantiate the AgeRatingComponentthe Type must be known. For this we are going to add export into user-rules.oss

src/app/rules/user-rules.ts
src/app/rules/user-rules.ts
/**
* Content of this file is automatically populated by oss compiler
*/
export {ApplicationRule} from './ts/Application.oss';
/** Auto generated export */
export {UserRule} from './ts/User.oss';
export * from '../age-rating/age-rating.component';

Re-compile and serve:

$ npm run compile:oss
$ ng serve

and let's change age from 20 to 30 and in read-only mode the value renders as Good.

Edit
View
Edit
View

And with that, we just overrode the default component property. To see how MetaUI determine how properties from multiple rules are applied, we need to understand how rules are loaded and ranked...