SWOT Matrix Control (drag and drop) based on Angular 8 Elements
Description
Conversion of my original project https://github.com/ChrisMayor/D365SwotMatrix to the Angular Elements
Custom 2 x 2 Matrix control which can be used in any web application (react, jquery, vue, plain js).
This control is based on Angular 8, TypeScript and Angular Elements.
Highlights
- Angular 8
- Angular Elements
Getting Started
To build
- Open cmd to project root
- run:
ng build --prod
- Output is in root/dist
Open in browser
- Open cmd to project root
- run:
ng serve -o
Screenshot
API
Input: Tile names : string
tile1Name: string = "Strengths";
tile2Name: string = "Weaknesses";
tile3Name: string = "Opportunities";
tile4Name: string = "Threats";
Input: Tiles (separator= ;;) : string
tile1
tile2
tile3
tile4
Input: tilexIsNull : boolean
tile1IsNull
tile2IsNull
tile3IsNull
tile4IsNull
How to run / API sample
start web application in browser
- clone repository
npm install
ng serve -o
- open in browser http://localhost:4200/
Sample: Use the Javascript API to transform the Swot Matrix to an Ansoff-Matrix
const component = document.querySelector('app-matrix');
component.tile1Name = "Market development"
component.tile2Name = "Diversivication"
component.tile3Name = "Market penetration"
component.tile4Name = "Product development"
component.tile1 = "Expand advertising;;Target more segments"
component.tile2 = "Enter new segments;; Expand distribution"
component.tile4 = "Strategy1;;Strategy2"
