Update Component Depending on WCMMode in Angular

[evancooperman-s]

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!

[BaluM]

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:

[BrianKasingli · Accepted solution]

@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.