Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Include responsivegrid component in angular SPA AEM 6.5

alissonxavier01
Level 3
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
alissonxavier01
Correct answer by
Level 3
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
alissonxavier01
Level 3
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.

alissonxavier01
Correct answer by
Level 3
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

ashishupreti921
Level 1
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.
Nikhil-Kumar
Community Advisor
Community Advisor

@Jörg_Hoh  @Arun_Patidar @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.

Arun_Patidar
Community Advisor
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));

 

 

Nikhil-Kumar
Community Advisor
Community Advisor
Hey Arun, I have only 3 files and one folder... i.e. dist, CHANGELOG..md, package.json and README.md
Arun_Patidar
Community Advisor
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>