Annotations

Introduction
Annotation rules are implemented by feature that is in typescript called decorators and its great way how to stay inside your .ts code.
Decorator rule implementaiton is still experimental here.
Let's update our domain class user.ts and set the new label for the  name field with @Property.Label('Full Name') decorator: 
src/app/model/user.ts
src/app/model/user.ts
export class User implements Entity {
​
  constructor(public uniqueName?: string,
  
              @Property.Label('Full Name')
              public name?: string,
              public description?: string, public created?: Date,
              public age?: number, public isAngularDeveloper: boolean = false) {
  }
​
  ...
​
​
The .oss files have higher precedence over annotation rules, so make sure to remove label property in theUser.oss. 
src/app/rules/User.oss
​
class=User {
    field=uniqueName {
      label:"Id";
    }
    field=description {
      trait:longtext;
    }
    zNone => *;
    zLeft => uniqueName => name => description => created => age => isAngularDeveloper;
}
​
  class= User {
   operation=(edit, create) {
      zNone => *;
      zLeft => name => description;
   }
​
  operation=(create) {
      zNone => *;
      zLeft => name => description => created => isAngularDeveloper;
  }
}
​
and run npm compile:oss
We just defined new selectors for [class=className, field=fieldName]. So in our example, this rule was created:
If selectors [class=User, field=name]
    match the current context values,
then apply the properties
    [label:"Full name"]
We can also annotate any property like this with the general Properties decorator:
src/app/model/user.ts
src/app/model/user.ts
export class User implements Entity {
​
  constructor(public uniqueName?: string,
  
              @Property.Properties('label:"Full Name"')
              public name?: string,
              public description?: string, public created?: Date,
              public age?: number, public isAngularDeveloper: boolean = false) {
  }
​
  ...
​

We can similarly add trait properties like this (required):
src/app/model/user.ts
src/app/model/user.ts
export class User implements Entity {
​
  constructor(public uniqueName?: string,
  
              @Property.Properties('label:"Full Name"')
              @Trait.Required()
              public name?: string,
              public description?: string, public created?: Date,
              public age?: number, public isAngularDeveloper: boolean = false) {
  }
​
  ...
​

We can also annotate any trait property like this with the general Traits decorator:
src/app/model/user.ts
src/app/model/user.ts
export class User implements Entity {
​
  constructor(public uniqueName?: string,
  
              @Property.Properties('label:"Full Name"')
              @Trait.Traits(['required'])
              public name?: string,
              public description?: string, public created?: Date,
              public age?: number, public isAngularDeveloper: boolean = false) {
  }
​
  ...
​
The following rule is created:
  If selectors [class=User, field=name]
      match the current context values,
  then apply the properties
      [trait:required]
   
Now the field name  is required and  label is set to "Full Name"
Now We've discussed how MetaIncludeComponent the ( <m-include-component> ) switches in the right component with the component property through chaining and annotation rules. As mentioned, the trait property is chained back to the context, but where are the rest of rules involved? This takes us to the MetaUI built-in rules.
Fundamentals - Previous
Chaining
Next - Fundamentals
Build-in Rules
Last updated 1 year ago