How to customise an angular 13 application

Question

I am currently upgrading an application that was using a combination of PHP serving content and Angular JS to Angular 13 with a PHP back end.

There are two things that I am struggling to find a solution to so if anyone could point me in the right direction I would be really greatful

My exising app uses a custom framework based on PHP, the Angular Templates were loaded from a PHP script. This allowed me to create a class that dealt with the HTML so for example I would have a Form object that you could add bootstrap rows and columns to, and in turn add objects to the columns.

The php code would be something like the below which has been simplified

 $form = new form('id','class','submit function')
 $bsrow= $form->add(new bsRow());
 $col= $bsrow->add(new bsCol(2,4,6));
 $col->add(new button('id','class','caption','action');
 echo $form->getHTML;`

The advantages of this were that if ever the button class changes I simply modified the HTML. More handy for widgets than buttons but it meant that all buttons were formed in the same way.

The other advantage of this is that I can read the captions from an XML file that the customer can override allowing them to change button text, styles etc. It also allowed me to embed logic on the server end to change the way the application behaved using php based on a config file.

So Question 1: Now that Angular is all HTML and each component has free hand HTML I seem to have lost that ability. Is there anything in Angular 13 that I can use to allow me to create these templates? Is that what a directive is meant for? It seems they work differently in IO to JS. The directive would need to be able to be set up as single element (such as a button) or a container (such as a form or div) that can accept child components.

Question 2: As the existing customisation was done on the server is there something I can use to load a set of customer configurable setting from a file somewhere that doesnt get blatted every time there is a new build. For example an application setting to alter the routes or a set of custom definitions that specifies the element ID and the custom text to use.

Question 3: How do you allow the customer to set their own set of style overrides?

Hope that makes sense.

Answer 1

Php doesn't fit well in rendering Single Page Applications. When SPAs were not in trend, the backend used to process a request & return the corresponding HTML.

But, with SPAs & frameworks like Angular, once we load the index.html file, everything happens on the browser now. We render, navigate & manage the application state in the browser. For communicating with the Backend, we make HTTP requests using SOAP/REST APIs & then manipulate the DOM accordingly.

Answer to a few questions of yours:

Is there anything in Angular 13 that I can use to allow me to create these templates?

• With Angular, you can create components that can be reused throughout the application. You can read more about the concepts like Content Projection , View Encapsulation , TemplateRefs , ViewChild . For creating reusable & scalable components, you can follow Atomic design pattern.https://cfpb.github.io/consumerfinance.gov/atomic-structure/

Also, you can take advantage of CSS preprocessors like SASS that has features like mixins & placeholders for creating reusable styling.

Is there something I can use to load a set of customer configurable setting from a file somewhere that doesnt get blatted every time there is a new build

• You should save all the customer configurable settings on your Backend. Whenever angular application loads, you can fetch these settings in APP_INITIALIZER just before your Angular app bootstraps & gets rendered on the browser.

How do you allow the customer to set their own set of style overrides?

• No idea about how your earlier setup used to work but with Angular , you need to setup a framework/architecture for this. You would fetch the customer preferred styles as a JSON object & use it to update styles of your components dynamically. Here are common ways to change styles dynamically https://medium.com/swlh/6-ways-to-dynamically-style-angular-components-b43e037852fa