Настройте стили флажков с помощью ivh-treeview

Question

Я использую angular-ivh-treeview для визуализации иерархического списка флажков.Он работает нормально, но у меня проблемы с установкой флажков.Если я прав, я должен использовать пользовательский шаблон и затем применить некоторые стили :: before / :: after к метке?

Что я получил до сих пор, это здесь , этоправильный способ подойти к нему?Я не уверен, как динамически установить идентификатор в пользовательском шаблоне, поэтому на данный момент все узлы имеют одинаковый идентификатор, который меняет только цвет первого узла.

Шаблон:

template: [
      '<div class="custom-control custom-checkbox-primaryblue">',
      '<input type="checkbox" class="custom-control-input" id="12">',
      '<label  class="custom-control-label" for="12">',
      '{{::trvw.label(node)}}',
      '</label>',
      '</div>',
    ]

CSS

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;

}

.custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;

}

.custom-control-label::before {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;   
    background-color: yellow;
}

.custom-control-label::after {
    position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
}

.custom-checkbox-primaryblue .custom-control-label {
    outline: none;
    white-space: nowrap;
  position: relative;
    margin-bottom: 0;
    background-color: yellow;
}


.custom-control-input:checked + .custom-control-label::before {
  background-color:blue;
}