Angular Generator Overview

Official Content
This documentation is valid for:

This is a brief description of the different sources of the Angular Generator.

The Angular generator is a front-end generator. The generated objects run on the browser and communicate with the back-end on the server to get and send information.

The back-end is not generated by the Angular generator; instead, it is generated by one of the existing GeneXus generators, such as the Java, .Net or .NetCore generator. 

Sources of the application (the project)

Every GeneXus object is generated in a separate directory, where all the sources are grouped. This is under the <Model directory>\mobile\Angular\<main>\src\apps folder.


The following image is a summary of the generated components for an Angular app:



For each Panel object, a component (the fundamental building block of Angular applications) is generated, which consists of three sources:

  • *.component.html : is the layout of the panel. It is an Angular template that represents the layout of UI. It is mainly HTML, and it adds elements and attributes that Angular interprets to perform the bindings with the data model and the specified UI events.
  • * .component.ts : is the particular logic of the panel. It is a TypeScript program. Events are generated here, and the state that is bound to the UI is manipulated here.
  • * .sercvice.ts : is the layer responsible for interacting with the server. It is a Typescript program where communication with the server is generated. Here, the structures are also generated with the data model that the panel will use.

The output of the project is a package that can be downloaded and executed by a browser.

Business Components

For each Business Component, two objects are generated:

  • * .dt.ts : is the data structure of the BC
  • * .service.ts : is the layer that is responsible for interacting with the server.


The Theme object and Design System Object are generated as a SASS. The classes are converted to CSS if possible, or else, to variables that the controls can use to implement the required functionality.

Other objects

In addition to the previous objects, other sources are generated in Angular:

  • app.module : It is the description of the module. It contains the specification required to assemble the package.
  • app.routing : It is the router that manages the state changes related to the navigation. Basically, what it does is that given a navigation route, it determines the component to be displayed.
  • app.settings : Addresses and properties configuration of the application (e.g:, the URL of the services; if you have security or not, etc.)
  • app.component : It is the application homepage.

UI Controls

The control library is implemented in a separate project independent of the Angular generator.

Dissecting Angular Architecture

Here is a complete guide for understanding the architecture of the generated application.