How to use the system configuration value in Knockout JS

In this post, we will learn how to get the Magento configuration value used in knockout Js file.

As you know in magento 2 sometimes the Knockout component is quite difficult to understand and Knockout JS is used on many pages which are used mostly on the checkout page.

Let’s start to learn to use the System Configuration Value to Knockout JS step by step.

Step 1: To create  config.js at the path app/code/Mageclues/StoreConfig/view/frontend/web/js/config.js

define(
    [
        'mage/storage',
        'jquery',
    ],
    function (Component,storage,url,jquery) {
        'use strict';
 
        return Component.extend({
            getConfigValue: function() {
               
                storage.get('storeconfig/custom/config').done(
                    function (response) {
                        if (response.success) {
                            return jQuery('.selecter_element').text(response.value);
                        }
                    }
                ).fail(
                    function (response) {
                        return jQuery('.selecter_element').text(response.value);
                    }
                );
            }
        });
    }
);

Step 2: To create Config.php controller file at the path
app/code/Mageclues/StoreConfig/Controller/Custom/Config.php

<?php

namespace Mageclues\StoreConfig\Controller\Custom;
 
class Config extends \Magento\Framework\App\Action\Action
{
    protected $resultJsonFactory;
 
    protected $storeManager;
 
    protected $scopeConfig;
 
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ) {
        $this->resultJsonFactory = $resultJsonFactory;
        $this->storeManager = $storeManager;
        $this->scopeConfig = $scopeConfig;
        parent::__construct($context);
    }
 
    /**
     * Execute view action
     *
     * @return \Magento\Framework\Controller\ResultInterface
     */
    public function execute()
    {
        $response = [];
        try {
            $configValue = $this->scopeConfig->getValue(
                'section_id/group_id/field_id',
                \Magento\Store\Model\ScopeInterface::SCOPE_STORE
            );
            $response = [
                'success' => true,
                'value' => __($configValue)
            ];
 
        } catch (\Exception $e) {
            $response = [
                'success' => false,
                'value' => __($e->getMessage())
            ];
            $this->messageManager->addError($e->getMessage());
        }
        $resultJson = $this->resultJsonFactory->create();
        return $resultJson->setData($response);
    }
}

Step 3: To create config.html file at the path
app/code/Mageclues/StoreConfig/view/frontend/web/template/config.html

<p class="selecter_element" data-bind="html: getConfigValue()"></p>

I hope this blog is useful for you. Please leave a comment for the query and review.

Thank you!