Update Component Depending on WCMMode in Angular

Question

For various components we use, we have different output depending on whether the author is in edit mode or preview mode (or wcmmode is disabled altogether). Is there an easy way to hook into this, such that we can leverage it when outputting content in an Angular template...and such that when it changes, we re-render the component?

I used the latest SPA archetype to generate my Angular project.

Thanks in advance!

BrianKasingli · Accepted Answer

@evancooperman-s

You can pass a property to your AngularJS component named "mode". The "mode" property can be set with either your Sling Models or pass the value directly with Sightly.

Sling Model:
@SlingObject
private SlingHttpServletRequest request;
WCMMode.fromRequest(request);

Sightly:
data-sly-test="${wcmmode.edit}"
data-sly-test="${wcmmode.preview}"
data-sly-test="${wcmmode.disabled}"
data-sly-test="${wcmmode.design}"

I hope this helps.

BaluM · Answer

Hi,AEM will create a cookie with name "wcmmode = (edit/preview)" if your page is opened in edit mode. // Fetch cookie value and compare if (cookieValue === 'edit') {//customcode} else{//customecode} Cookie in edit mode: Cokkie in preview mode:

Sign up

Login with SSO

Login to the community

Login with SSO