Include responsivegrid component in angular SPA AEM 6.5

[alissonxavier01]

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

[alissonxavier01]

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.

[alissonxavier01 · Accepted solution]

I have resolved the problem using this component.

We need to include

<aem-responsivegrid> in component template.

AEMResponsiveGridComponent

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

[ashishupreti921]

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.

[Nikhil-Kumar]

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

[arunpatidar]

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));

[Nikhil-Kumar]

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

[arunpatidar]

It is a minified file inside dist.

[Nikhil-Kumar]

Ok got it thanks

[arunpatidar]

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