Accessing variables outside an Angular 2 component

On one of my pages, I am using a component like this:

<ion-navbar *navbar class="contact_navbar">
    <ion-title>About us</ion-title>
</ion-navbar>

<ion-content>
     <ck-about [channel]="ionic" [template]="template_1"></ck-about>
</ion-content>

Instead of the static text About us, I want to know how I can include a variable from the ck-about component and pass it to the title here?

Answer №1

To achieve this, you can utilize the @ViewChild method and then make use of ngAfterViewInit to assign the content for About Us.

@Component({
  selector: 'someDir',
  templateUrl: 'someTemplate',
  directives: [ItemDirective]
})
class SomeDir {
  @ViewChild(ItemDirective) viewChild:ItemDirective;
  ngAfterViewInit() {
    // viewChild is now initialized
  }
}

This approach is just one among many others, but it is considered as the recommended way to accomplish this task.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular's handling of cached data returned from HTTP requests experiencing issues

In my controller, I have the following code snippet: var cache = $cacheFactory('contacts'); var data = cache.get('contacts'); if(!data) { Contacts.get() .success(function(result) { data = result; c ...

Introducing the 'node' type in tsconfig leads to errors in type definitions

I've encountered an issue with my NodeJS project where I have a type declaration file to add properties to the Request object: @types/express/index.d.ts: import { User } from "../../src/entity/user.entity"; declare global { namespace Exp ...

Issues arise when Typescript fails to convert an image URL into a base64 encoded string

My current challenge involves converting an image to base 64 format using its URL. This is the method I am currently using: convertToBase64(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.he ...

AngularJS http requests are not redirecting to the errorCallback

Currently, I am utilizing angularjs to make calls to my Rest web services, but I am encountering an issue with error handling. Below is an example of one of my http calls: $http({ method: 'POST', url: "tr"+licenseSelected, //angular need ...

Steps to call a controller function from a ui-grid cellTemplate

In my cellTemplate, I included a link that triggers a function in the controller when clicked. The function requires passing the item of the row that was clicked as an argument. ...

Currently in the process of creating a carousel displaying images, I have encountered an issue stating: "An optional property access cannot be on the left-hand side of an assignment expression."

I am currently working on an Angular Image Carousel that utilizes a model to iterate through the images. However, I am encountering an error when attempting to access the first position. An error message stating "The left-hand side of an assignment expres ...

Building an Angular 4 app featuring a customized default landing page and URL parameters functionality

I am in the process of developing a web portal that will be embedded within an iFrame. Below is the code snippet I am using to set up the portal: Routes Configuration const routes: Routes = [ { path: '', redirectTo: '/dash ...

Issues with the functionality of Onsen UI ons-splitter-side event handlers have been reported

I have been attempting to make the postopen and postclose events function properly, but I am facing challenges in getting them to work. I have been following the guidelines provided here. The basic outline of my code looks like this: <ons-splitter va ...

Getting the current page name within the app.component.ts file in Ionic 3 - a simple guide

Is it possible to retrieve the current active page name within the app.component.ts file in Ionic without having to add code to any other pages? ...

Encountering a problem while trying to run ionic serve in the Terminal following a recent update

Currently running on ubuntu 15.10 Using ionic version 1.7.15. Recently attempted to update my nodejs to the latest version 6 and npm, but encountered an error when running the ionic server command as shown in this https://i.sstatic.net/8Fr6A.png The com ...

How can we dynamically enable or disable a button based on the availability of input field data in an Angular FormGroup?

When it comes to deciding whether my form input field is required or not, I rely on the API data set. If the input is mandatory, I want to disable the button until the user inputs some value. As an absolute beginner in reactive form in angular, I could rea ...

Employing ng-repeat within a ui-scope

I'm having trouble getting my ui-view to update dynamically using ng-repeat. I'm not sure if what I want to do is even possible because when I add static objects to intro.html, they display properly. Thank you for any assistance, JS }).st ...

Leverage rxjs/Typescript to transform an array nested within the data received from an external API

Exploring Typescript/Javascript is a new adventure for me, especially as I delve into the world of rxjs. Here's a snippet of code that I've been working with: return this.http.get<IXenoCantoResponse>(`${this.corsAnywhereUrl}${this.xenoCant ...

Utilizing the power of AngularJS, NodeJS, and Mongoose to create dynamic and

I am relatively new to the world of JavaScript. I am currently experimenting with using pie charts from Highcharts (www.highcharts.com) in conjunction with AngularJS. In the example provided below, everything works smoothly, except for the fact that the "i ...

What does the term "Typescript" indicate when referred to as a shorthand for a union of undefined and string as an

Could someone please confirm if these two are essentially the same? It seems a bit strange to me. interface TypeA { time: string | undefined; } interface TypeB { time?: string; } ...

Error encountered with the Angular 2 routing system

Currently, I am facing an issue with my Angular 2 router module. Whenever I try to access the link /city, I encounter an error message saying 'ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet Error: Cannot activat ...

Prevent refreshing Google Maps when changing routes in AngularJS

Utilizing a Google map as the background for my website adds a unique visual element to the data displayed on different routes. However, I have encountered an issue where the map reloads with every route change, resulting in an unsightly flash of white tha ...

Exploring the relationship between Typescript, RxJS, Ajax, undefined values

This particular question stands out due to the fact that despite similar issues being previously addressed, none of the existing solutions have proven effective. The problem at hand is as follows: There's a Typescript class that initiates an RxJS.aja ...

Angular HTTP request with form data is not functioning

I'm facing an issue with $http in angularjs : app.controller('ctrlProfil', function($scope, $http){ $scope.loginProfil = "<?= $_SESSION['login']?>"; $scope.mdpProfil = "<?= $_SESSION['mdp']?>"; $scope. ...

A Guide on Accessing Promise Results in AngularJS

In my code, I am using a controller to retrieve information from SharePoint. While debugging, I noticed that the value of data.d.UserProfileProperties.results[115].Value is what I need to display in the view. However, I am struggling to extract that value ...