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:
Create new angular application (unless you are integrating it with existing one)
ng new MyDetailPage --style=scss
@ngx-metaui/rules to your app
cd MyDetailPage/ ng add @ngx-metaui/rules --uiLib="material"
Once finished you are fully configured to start some rule driven development but we skip ahead generate some ready to use page!
--uiLib="material" switch pre-configures UI Library to be used with the MetaUI.
UserDetail page with different page modes:
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
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
Run the application
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.tsto represent our domain object
UserDetailComponentwith just 3 main lines to generate whole content and 3 buttons to switch between
- A Rule file
User.oss( OSS - Object style sheet ) to style how the object should be rendered and behave for different situations
The page should look like this showing different fields based on selected operation
Now we just touched the surface of the rule driven UI development and looked at other ways how web application can be built.