NgxXmlCollapsible

Ngx xml collapsible

Try it https://stackblitz.com/~/github.com/AlexKhymenko/ngx-xml-collapsible

Installation

• Simply run npm i ngx-xml-collapsible.
• Add animation provideAnimations provider to your project

bootstrapApplication(AppComponent, {
                      providers: [provideAnimations(),
                                  provideZoneChangeDetection({ eventCoalescing: true }),
                                  provideRouter(routes)]
}).catch((err) => console.error(err));

Usage

Add ngxCollapseAnimated directive to where the content should be visible

    <ngx-xml-collapsible [xmlData]="xmlData"/>

Import NgxXmlCollapsibleComponent in Your component

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, NgxXmlCollapsibleComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  xmlData =     '<?xml version="1.0"?> <PurchaseOrder PurchaseOrderNumber="99503" OrderDate="1999-10-20"> <Address Type="Shipping"> <Name>Ellen Adams</Name> <Street>123 Maple Street</Street> <City>Mill Valley</City> <State>CA</State> <Zip>10999</Zip> <Country>USA</Country> </Address> <Address Type="Billing"> <Name>Tai Yee</Name> <Street>8 Oak Avenue</Street> <City>Old Town</City> <State>PA</State> <Zip>95819</Zip> <Country>USA</Country> </Address> <DeliveryNotes>Please leave packages in shed by driveway.</DeliveryNotes> <Items> <Item PartNumber="872-AA"> <ProductName>Lawnmower</ProductName> <Quantity>1</Quantity> <USPrice>148.95</USPrice> <Comment>Confirm this is electric</Comment> </Item> <Item PartNumber="926-AA"> <ProductName>Baby Monitor</ProductName> <Quantity>2</Quantity> <USPrice>39.98</USPrice> <ShipDate>1999-05-21</ShipDate> </Item> </Items> </PurchaseOrder>';
}