title: Remove parent component from child
body: <p>I am experiencing trouble with routing in angular. My URLs seem to work fine but my problem is that when I visit the child component(CreateEventsComponent) the parent component(EventsComponent) shows as well.</p>
  <p>How can I remove it from my component?</p>
  <pre><code>const routes: Routes = [
        {
          path: '',
          component: EventsComponent,
          data: {
            title: 'Events',
          },
          children: [
            {
              path: 'create',
              component: CreateEventsComponent,
              data: {
                title: 'Create Events',
              },
            },
          ],
        },
      ];
  </code></pre>
  <p>This is my parent html code</p>
  <pre><code>&lt;p&gt;Events works!&lt;/p&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>This is my child html code</p>
  <pre><code>&lt;p&gt; Create Events works &lt;/p&gt;
  </code></pre>