<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="Electron" modified="2026-02-23T08:00:00.000Z" agent="draw.io" version="24.0.0">
  <diagram name="State Management Decision" id="state-mgmt">
    <mxGraphModel dx="1300" dy="800" grid="1" gridSize="10">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Title -->
        <mxCell id="title" value="Angular 21 State Management Decision Tree (Part 6)" style="text;html=1;strokeColor=none;fillColor=none;align=center;fontSize=17;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="80" y="20" width="1030" height="40" as="geometry" />
        </mxCell>

        <!-- Start -->
        <mxCell id="start" value="You have state to manage" style="ellipse;fillColor=#1a1a2e;fontColor=#ffffff;strokeColor=#0f3460;fontSize=13;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="450" y="80" width="230" height="55" as="geometry" />
        </mxCell>

        <!-- Q1 -->
        <mxCell id="q1" value="Only ONE component needs it?" style="rhombus;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="428" y="170" width="274" height="70" as="geometry" />
        </mxCell>

        <!-- Level 1 -->
        <mxCell id="l1" value="&lt;b&gt;Level 1: Component signal()&lt;/b&gt;&lt;br/&gt;const isOpen = signal(false);&lt;br/&gt;Lives in the component class" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="780" y="160" width="240" height="70" as="geometry" />
        </mxCell>
        <mxCell id="a-l1" edge="1" source="q1" target="l1" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#2E7D32;strokeWidth=2;" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="lbl-l1" value="YES" style="text;fontSize=11;fontStyle=1;fontColor=#2E7D32;" vertex="1" parent="1">
          <mxGeometry x="750" y="173" width="40" height="20" as="geometry" />
        </mxCell>

        <!-- Q2 -->
        <mxCell id="q2" value="Multiple components share it?" style="rhombus;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="428" y="290" width="274" height="70" as="geometry" />
        </mxCell>
        <mxCell id="a-q1q2" edge="1" source="q1" target="q2" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#333;strokeWidth=2;" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="lbl-no1" value="NO" style="text;fontSize=11;fontStyle=1;fontColor=#C62828;" vertex="1" parent="1">
          <mxGeometry x="548" y="240" width="40" height="20" as="geometry" />
        </mxCell>

        <!-- Level 2 -->
        <mxCell id="l2" value="&lt;b&gt;Level 2: Injectable Signal Service&lt;/b&gt;&lt;br/&gt;@Injectable({ providedIn: 'root' })&lt;br/&gt;AuthService · CartService · NotificationService" style="rounded=1;fillColor=#E3F2FD;strokeColor=#1565C0;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="780" y="280" width="240" height="80" as="geometry" />
        </mxCell>
        <mxCell id="a-l2" edge="1" source="q2" target="l2" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#1565C0;strokeWidth=2;" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="lbl-l2" value="YES" style="text;fontSize=11;fontStyle=1;fontColor=#2E7D32;" vertex="1" parent="1">
          <mxGeometry x="750" y="298" width="40" height="20" as="geometry" />
        </mxCell>

        <!-- Q3 -->
        <mxCell id="q3" value="Needs optimistic updates or undo?" style="rhombus;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=12;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="418" y="410" width="294" height="70" as="geometry" />
        </mxCell>
        <mxCell id="a-q2q3" edge="1" source="q2" target="q3" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#333;strokeWidth=2;" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="lbl-no2" value="COMPLEX" style="text;fontSize=11;fontStyle=1;fontColor=#C62828;" vertex="1" parent="1">
          <mxGeometry x="543" y="360" width="60" height="20" as="geometry" />
        </mxCell>

        <!-- Level 3 -->
        <mxCell id="l3" value="&lt;b&gt;Level 3: NgRx Signals Store&lt;/b&gt;&lt;br/&gt;signalStore() · withEntities()&lt;br/&gt;patchState · optimistic updates · DevTools&lt;br/&gt;OrderStore — cancel + rollback" style="rounded=1;fillColor=#FFF3E0;strokeColor=#E65100;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="780" y="400" width="250" height="90" as="geometry" />
        </mxCell>
        <mxCell id="a-l3" edge="1" source="q3" target="l3" style="edgeStyle=orthogonalEdgeStyle;strokeColor=#E65100;strokeWidth=2;" parent="1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="lbl-l3" value="YES" style="text;fontSize=11;fontStyle=1;fontColor=#2E7D32;" vertex="1" parent="1">
          <mxGeometry x="750" y="420" width="40" height="20" as="geometry" />
        </mxCell>

        <!-- resource() box -->
        <mxCell id="resource-box" value="&lt;b&gt;resource() — Async / HTTP data&lt;/b&gt;&lt;br/&gt;productsResource = resource({ loader: ... })&lt;br/&gt;Handles loading/error/data as Signals automatically&lt;br/&gt;No persistent state — ephemeral, SSR-safe" style="rounded=1;fillColor=#F3E5F5;strokeColor=#7B1FA2;fontSize=11;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="80" y="300" width="300" height="90" as="geometry" />
        </mxCell>

        <!-- TechShop architecture -->
        <mxCell id="arch-bg" value="TechShop Final Architecture" style="swimlane;startSize=30;fillColor=#f5f5f5;strokeColor=#666;fontSize=12;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="80" y="520" width="1060" height="110" as="geometry" />
        </mxCell>
        <mxCell id="a-auth" value="auth/ → Level 2" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=11;" vertex="1" parent="arch-bg">
          <mxGeometry x="20" y="40" width="170" height="45" as="geometry" />
        </mxCell>
        <mxCell id="a-cart" value="cart/ → Level 2" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=11;" vertex="1" parent="arch-bg">
          <mxGeometry x="210" y="40" width="170" height="45" as="geometry" />
        </mxCell>
        <mxCell id="a-catalog" value="catalog/ → resource()" style="rounded=1;fillColor=#F3E5F5;strokeColor=#7B1FA2;fontSize=11;" vertex="1" parent="arch-bg">
          <mxGeometry x="400" y="40" width="170" height="45" as="geometry" />
        </mxCell>
        <mxCell id="a-orders" value="orders/ → Level 3 NgRx" style="rounded=1;fillColor=#FFF3E0;strokeColor=#E65100;fontSize=11;" vertex="1" parent="arch-bg">
          <mxGeometry x="590" y="40" width="180" height="45" as="geometry" />
        </mxCell>
        <mxCell id="a-notif" value="notifications/ → Level 2" style="rounded=1;fillColor=#E8F5E9;strokeColor=#2E7D32;fontSize=11;" vertex="1" parent="arch-bg">
          <mxGeometry x="790" y="40" width="195" height="45" as="geometry" />
        </mxCell>

      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
