menu
Logo
  • Why azing?
  • Blog
  • Help
ENarrow_drop_down
  • DE
  • EN
Suche in Checklisten
search
azing Logo ENarrow_drop_down
  • DE
  • EN
  • Why azing?
  • Help
2sxc
drive_folder_upload
  • homeChecklist Templates
  • south
  • fiber_manual_recordPro: Develop with 2sxc (Apps, Content-Types, Templates, etc.)
  • south
  • fiber_manual_recordJS: Angular Apps Development
  • south

folder_sharedDnn-Sxc-Angular 11 (for Angular 6-11)

  • homeChecklist Templates
  • south
  • fiber_manual_recordPro: Develop with 2sxc (Apps, Content-Types, Templates, etc.)
  • south
  • fiber_manual_recordJS: Angular Apps Development
  • south

folder_sharedDnn-Sxc-Angular 11 (for Angular 6-11)

Folders and checklists

  • folder_sharedToolbars
  • check_circlednn-sxc-angular - Quick Start
  • check_circlednn-sxc-angular - Tutorial - Accessing Content using REST and content$
  • check_circleEnable local development in an existing 2sxc / DNN / Angular 11 app
  • check_circleTemplate Angular 11 App - Getting started
  • check_circleTemplate Angular 11 App - Install and Discover
  • check_circleTemplate Angular 11 App - Rename the App

Parts (0) expand_more

These are small document-parts which are used in other documents. They are not a starting point for any real activity. Because of this, they will be listed further down and the search will not list them unless requested. 

This assumes you already created an app and installed dnn-sxc-angular, or installed the template app. 

Create Demo Data and Enable Permissions to Read

  1. Create a content type named Person which we will access later from our angular app. Add a string field Name and create a sample entity / record.

  2. In the content type list, you can define permissions by clicking the user icon. In this example, we want the content type to be accessible anonymously. Grant Read permission to the access level SecurityAccessLevel.View (if reading from inside DNN) or SecurityAccessLevel.Anonymous(if you want to access it from outside of DNN)

Read the Data from your Angular App

  1. We will add a component that displays the list of people. Create a folder /src/app/person and add the two files person-list.component.ts and person.component.ts to it; get them from the sample app.

  2. Open app.component.html and add the following code:

    <person-list></person-list>
  3. Open app.module.ts and register the new components. At the top, add the imports:

    import { PersonListComponent } from './person/person-list.component'
    import { PersonComponent } from './person/person.component'

    In the declarations array, add both:

    declarations: [
        AppComponent,
        PersonListComponent,
        PersonComponent
    ],
  4. Reload the page and check if the sample entry is displayed.

Logo
Legal | Content Copyright CC-BY 4.0
bug_reportReport Bug
  • info
  • Links
  • Permissions
code Share
code
URL copied to clipboard.
Embed Checklist close
Copy Copy
Content Copyright

CC-BY 4.0

Translations

None

2sxc - Content Management for DNN & Oqtane Logo

2sxc - Content Management for DNN & Oqtane

QR-Code
azing.org/2sxc/r/Vtkk_uc4
View & Use

Public (can be used by everybody)

Edit & Admin

Default (all members can edit)

This catalog has a simple permission model, where all members have the same permissions. For advanced permissions, upgrade to Enterprise.

Here you can see how this document is used and linked by other documents

Used in (0)

Others referencing this

Uses these (2)

Documents linked from this document

  1. dnn-sxc-angular - Quick Start
  2. Template Angular 11 App - Getting started
How it Behaves

How this document is categorized changes how it behaves.

This is a main document, it is listed normally and appears in search result.

Type

This is a Checklist. Lists are converted into checkboxes.

Get something to say?

Comment to start a discussion or make a note
send

please log on to chat

close

Durchsuche ganz Azing