Change component properties

This is for:

Developer

Atomic v2 is an older major version. For new implementations, use Atomic v3.

You can programmatically change the properties of an initialized Atomic component. In the following example, the display property of the atomic-result-list component updates based on the width of the window.

<head>
  <!--- ... --->
  <script>
    (async () => {
        await customElements.whenDefined('atomic-search-interface');
        const searchInterface = document.querySelector('#search');

        await searchInterface.initialize({
            accessToken:'<ACCESS_TOKEN>',
            organizationId: '<ORGANIZATION_ID>'
        });

        const { engine } = searchInterface;
        const resultList = document.querySelector('atomic-result-list');
        const body = document.getElementsByTagName('body')[0];

        const resizeObserver = new ResizeObserver(() => { 
          if (window.innerWidth < 700) {
              resultList.setAttribute('display', 'grid'); 
          } else {
              resultList.setAttribute('display', 'table');
          }
        });
        resizeObserver.observe(body); 

      searchInterface.executeFirstSearch();
    })();
  </script>
  <!--- ... --->
</head>

	Create a `ResizeObserver`.
	Compare the window width to a threshold. Change the `display` property of the `atomic-result-list` component accordingly.
	Set the resize observer object to observe the `body` element.