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
       field=age  editable=false {
          component:AgeRatingComponent;
          bindings: {
            value:$value;
          }
       }
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
  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
/**
 * 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
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...
Last modified 3yr ago