Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Include responsivegrid component in angular SPA AEM 6.5

Avatar

Level 3

Hello Guys,

Does anyone know how I can include response grid inside angular component?

It is possible in HTL.

<sly data-sly-resource="${'responsiveContent' @ resourceType='wcm/foundation/components/responsivegrid'}"></sly>

Thanks

Alisson Xavier

1 Accepted Solution

Avatar

Correct answer by
Level 3

I have resolved the problem using this component.

We need to include

<aem-responsivegrid> in component template.

AEMResponsiveGridComponent

@adobe/cq-angular-editable-components - npm

View solution in original post

9 Replies

Avatar

Level 3

smacdonald2008

Can you help me ask it for product developers?

I need this so much because I am developing a component which needs to add component inside another one.

Like Carousel component included on AEM 6.5.

Avatar

Correct answer by
Level 3

I have resolved the problem using this component.

We need to include

<aem-responsivegrid> in component template.

AEMResponsiveGridComponent

@adobe/cq-angular-editable-components - npm

Avatar

Level 1
how did you do it exactly? <aem-responsivegrid> needs some props to be passed, how did you get the required props in the ts file? can you share some lines of code please. It would be really helpful.

Avatar

Community Advisor

@Jörg_Hoh  @arunpatidar @vanegi @BrianKasingli 

Do we anything similar for react as well ?

As mentioned by @alissonxavier01 we have libraries in Angular to have responsive grid component.

But I couldn't find Class: AEMResponsiveGridComponent as part of react libraries.

Avatar

Community Advisor

you can find that in npn module ui.frontend.react\node_modules\@adobe\cq-react-editable-components

 

class ResponsiveGrid extends AllowedComponentsContainer {

    /**
     * The attributes that will be injected in the root element of the container
     *
     * @Returns {Object} - the attributes of the container
     */
    get containerProps() {
        let containerProps = super.containerProps;
        containerProps.className = (containerProps.className || '') + ' ' +  this.props.gridClassNames;
        return containerProps;
    }

    /**
     * The properties that will go on the placeholder component root element
     *
     * @Returns {Object} - the properties as a map
     */
    get placeholderProps() {
        let props = super.placeholderProps;
        props.placeholderClassNames = (props.placeholderClassNames || '') + ' ' +  PLACEHOLDER_CLASS_NAMES;
        return props;
    }

    /**
     * Returns the properties to add on a specific child component
     *
     * @Param   {Object} item     The item data
     * @Param   {String} itemKey  The key of the item
     * @Param   {String} itemPath The path of the item
     * @Returns {Object} The map of properties to be added
     */
    getItemComponentProps(item, itemKey, itemPath) {
        let attrs = super.getItemComponentProps(item, itemKey, itemPath);

        attrs.className = attrs.className || '';
        attrs.className += this.props.columnClassNames && this.props.columnClassNames[itemKey] ? ' ' + this.props.columnClassNames[itemKey] : '';

        return attrs;
    }
}

ResponsiveGrid.defaultProps = {
    title: 'Layout Container',
    // Temporary property until CQ-4265892 is addressed, beware not rely it
    _allowedComponentPlaceholderListEmptyLabel: 'No allowed components for Layout Container'
};

MapTo('wcm/foundation/components/responsivegrid')(withComponentMappingContext(ResponsiveGrid));

 

 



Arun Patidar

Avatar

Community Advisor
Hey Arun, I have only 3 files and one folder... i.e. dist, CHANGELOG..md, package.json and README.md

Avatar

Community Advisor
It is a minified file inside dist.


Arun Patidar

Avatar

Community Advisor

<p>you can find that in npn module ui.frontend.react\node_modules\@adobe\cq-react-editable-components</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<li-code lang="javascript">class ResponsiveGrid extends AllowedComponentsContainer {

/**
* The attributes that will be injected in the root element of the container
*
* {Object} - the attributes of the container
*/
get containerProps() {
let containerProps = super.containerProps;
containerProps.className = (containerProps.className || '') + ' ' + this.props.gridClassNames;
return containerProps;
}

/**
* The properties that will go on the placeholder component root element
*
* {Object} - the properties as a map
*/
get placeholderProps() {
let props = super.placeholderProps;
props.placeholderClassNames = (props.placeholderClassNames || '') + ' ' + PLACEHOLDER_CLASS_NAMES;
return props;
}

/**
* Returns the properties to add on a specific child component
*
* {Object} item The item data
* {String} itemKey The key of the item
* {String} itemPath The path of the item
* {Object} The map of properties to be added
*/
getItemComponentProps(item, itemKey, itemPath) {
let attrs = super.getItemComponentProps(item, itemKey, itemPath);

attrs.className = attrs.className || '';
attrs.className += this.props.columnClassNames &amp;&amp; this.props.columnClassNames[itemKey] ? ' ' + this.props.columnClassNames[itemKey] : '';

return attrs;
}
}

ResponsiveGrid.defaultProps = {
title: 'Layout Container',
// Temporary property until CQ-4265892 is addressed, beware not rely it
_allowedComponentPlaceholderListEmptyLabel: 'No allowed components for Layout Container'
};

MapTo('wcm/foundation/components/responsivegrid')(withComponentMappingContext(ResponsiveGrid));</li-code>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>



Arun Patidar