Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
102 lines (62 sloc) 2.81 KB

Getting started

In this section we'll cover basics of the MetaUI rules framework @ngx-metaui/rules to assemble user interface on the fly without templates.


  • Knowledge of typescript
  • Basic Web development
  • Angular 7.x

Continuing without prior knowledge of all above is not recomended and result is unknown.


To get everything up and running run following commands:

Step 1

Create new angular application (unless you are integrating it with existing one)

  ng new MyDetailPage --style=scss

Step 2

Add @ngx-metaui/rules to your app

  cd MyDetailPage/
  ng add @ngx-metaui/rules --uiLib="prime-ng"

Once finished you are fully configured to start some rule driven development but we skip ahead generate some ready to use page! The --uiLib="prime-ng" switch pre-configures UI Library to be used with the MetaUI. Even we currently support only PrimeNg the Material 2 library is somethign we are working on right now...

Step 3

Create UserDetail page with different page modes: Create, Edit and View Even this does't do much it will show
basic aspects of MetaUI.

ng g  @ngx-metaui/rules:mPage --modelClass=User --name=UserDetail 

and follow instructions printed in console such as compile oss rules (We will get to this):

npm run compile:oss

Step 4

Either attach created page into your router or like in our case we will simply replace the out of box welcome content of the app.component.html with this line


Step 5

Run the application

ng serve

and access the page http://localhost:4200 and you just created a page which is based on rules.

Let's Recap what just happened and what was created:

  • /model/user.ts to represent our domain object
  • Component UserDetailComponent with just 3 main lines to generate whole content and 3 buttons to switch between Create, Edit and View modes
  • A Rule file User.oss ( OSS - Object style sheet ) to style how the object should be rendered and behave for different situations

alt text

The page should look like this showing different fields based on selected operation

Next Step

Now we just touched the surface of the rule driven UI development and looked at other ways how web application can be built.

  • To understand how this works please jump to the next topic where we extend this application and give you deeper introduction to the MetaUI.

  • Or you can read High level fundamentals that are behind this framework.

You can’t perform that action at this time.