Page History

...

<!-- This example shows the theme named "dspace" was used for the "themed-header-navbar-wrapper.component.ts" -->
<ds-themed-header-navbar-wrapper ... data-used-theme="dspace"></ds-themed-header-navabar-wrapper>

<main>
	<!-- But, on the same page, the theme named "base" (core code) was used for the "themed-breadcrumbs.component.ts" -->
    <ds-themed-breadcrumbs ... data-used-theme="base"></ds-themed-breadcrumbs>
</main>

Finding which component is generating the content on a page

Every DSpace Angular component has a corresponding "<ds-*>" HTML-like tag. The HTML tag is called the "selector" (or CSS selector), and it is defined in the "*.component.ts" tag using the "@Component" decorator (see Angular's Component Overview for the basics).  The key point to remember is that if you can find the "<ds-* >" tag, then it is easy to determine which component generated that tag!

So, supposing you are trying to determine which component is generating part of a DSpace page.

1. View the HTML source of the page in your browser.  Search for that section of the page.  (Or, right click on that part of the page and select "Inspect")
   1. For example, on the homepage view the source of the "Communities in DSpace" heading
2. Look for a parent HTML tag that begins with "ds-". This is the component selector!

   1. Continuing the example, if you view the source  of the "Communities in DSpace" heading, you'll see something like this (all HTML attributes have been removed to make the example simplier):

      Code Block
      <ds-top-level-community-list> <div> <h2> Communities in DSpace </h2> <p>Select a community to browse its collections.</p> </div> </ds-top-level-community-list>

      
      

   2. Based on the above HTML source, you can see that the "Communities in DSpace" header/content is coming from a component who's selector is "ds-top-level-community-list"
3. Now, search the source code (./src/app/) directories for a ".component.ts" file which includes that "ds-" tag name.  This can most easily be done in an IDE, but also could be done using command line tools.

   1. Continuing the example, if you search the ./src/app/ directories for "ds-top-level-community-list" you'll find a match in the "src/app/home-page/top-level-community-list/top-level-community-list.component.ts" file:

      Code Block
      @Component({ selector: 'ds-top-level-community-list', ... })

      
      

   2. This lets you know that to modify the display of that section of the page, you may need to edit either the "top-level-community-list.component.ts" file or  it's HTML file at "top-level-community-list.component.html"
4. Once you've located the component, you can edit that component's HTML file (ending in "component.html") to change that section of the page.
   1. Keep in mind, the component's HTML file may reference other "ds-" tags!  Those are other components in DSpace which you can find again by searching the "./src/app" directories for that tag.

Additional Theming Resources

...