[RadSideDrawer] Allow DrawerContent to be changed in App.

[EdJones]

Please, provide the details below:

Tell us about the problem

Need to be able to replace sidedrawer content.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• Progress NativeScript UI plugin version: (the version of nativescript-ui-* in the package.json) 8.0.0
• CLI: (run tns --version to fetch it)
• Cross-platform modules: (the version of tns-core-modules in the package.json)
• Runtime(s): (the "tns-android" and "tns-ios" properties in the package.json)

Please tell us how to recreate the issue in as much detail as possible.

1. Start the application ..
2. Navigate through a series of sidedrawer items and their corresponding pages.
3. At some point, select a new section (page), e.g. PartTwo. Sidedrawer contents could then be replaced with a new DrawerContentP2 from DrawerContentP2.vue .

The drawerContent property for RadSideDrawer seems to hold this. But it's not clear how to set this mid-app. (Using {N}-Vue).

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

(You can paste entire code snippets, link to playground demo or attach a runnable project)

[EdJones]

I was able to achieve the desired effect by creating a sidedrawer that is only a placeholder, that is, holds a component with variable content. Thanks to Allegator.io for explaining Swappable Dynamic Components

<template>
    <component :is="dynamicComponent"></component>
</template>

<script>

import DrawerContentL1 from "./DrawerContentL1";
import DrawerContentL2 from "./DrawerContentL2";

export default {
  components: {
    DrawerContentL1,
    DrawerContentL2
  },
  computed: {
    dynamicComponent() {
      if(this.$store.state.currentLevel=="L1") {
        return 'DrawerContentL1';
      } else {
        return 'DrawerContentL2';
      }
    }
  }
}
</script>`